不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角
本着不懂前端的程序员不是好美工的观点,所以作为一个仅懂一点前端的程序员,为了成为一个好美工,所以只能用些取巧的方法伪装一下.
metronic一个基于bootstrap的响应式的后台管理平台的UI框架,为我们提供了管理后台能用到的各种UI样式,因为是基于bootstrap,所以满足响应式的UI设计,故同时支持在各种设备和屏幕分辨率下UI样式不会出现大的硬伤.可以做到一套UI兼容各种屏幕各种设备.
打开metronic目录下的start.htm文件,可以看到如下的视图:
框架内置了好几种主题颜色,随便选一个主题,按下html按钮会导向对应主题的页面预览页:
可以看到预览页中主要分为左侧的菜单,上侧的导航和右侧的内容页面及侧边栏这几部分组成,这个框架的整体布局大体就是这样的形式.当然在此基础上我们可以做一些布局的调整,比如去掉上面的导航右侧的边栏等.
左侧菜单中的各种选项就是这个框架为我们内置的各种UI样式,非常丰富,包含各种样式的UI组件表单等等.我们可以查看对应的页面文件来查看对应样式的前端代码.
因为这个是程序员视角的教程,所以不会在这里详细介绍前端的样式代码,但是呢为了更好的使用这个样式库,还是建议扫一眼bootstrap的教程.不会浪费多久时间.
以上那个菜鸟教程其实已经是很简略的了,但是即便这样也不用看的太细致,只需要看一下第一部分的CSS,简单扫一下第二部分的布局组件即可.
然后这里我举一个实际的使用例子,比如我们打开metronic目录/theme/templates/admin/table_editable.html这个文件.
可以看到这是一个可编辑的table组件.查看table_editable.html的源码可以看到如下引入:
<!-- 页头一堆CSS的引入 --> <!-- 页尾一堆js的引入-->
<script src="../../assets/admin/pages/scripts/form-editable.js"></script>
<script>
jQuery(document).ready(function() {
// initiate layout and plugins
Metronic.init(); // init metronic core components 重要且必需,初始化metronic核心的东东
Layout.init(); // init current layout 重要且必需,初始化一些布局
//之后的都是非必需的一些组件插件的初始化
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
FormEditable.init(); //这个就是我们这个例子中的table组件初始化的地方
});
</script>
这个页面中引入的form-editable.js文件,实际就是我们自己需要根据业务逻辑和实际需求进行更改的js文件,其中包含table这个组件的UI样式功能实现,这里就需要看一下其中的js代码实现,简单的梳理一下这个组件的使用规则,然后我们将其中的代码全都复制到我们自己的js文件中,并根据需要进行一定的修改,最后只需要引入我们自己修改后的js文件即可.
以上就是这个metronic框架的程序员视角的简易应用流程.整体使用起来还是很方便的,基本只要找到样本样式,查看源码,梳理插件的js逻辑,修改,引入就可以得到外观效果很不错的UI界面了.
PS:在metronic目录\theme\assets\global\css下的全局样式,效果也很不错,尤其是其中的名字中带md的3d阴影样式,很漂亮.可以根据需要引入不同的全局样式.
不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角的更多相关文章
- 使用 SailingEase WinForm 框架构建复合式应用程序(插件式应用程序)
对于一些较小的项目,具备一定经验的开发人员应该能够设计和构建出便于进行维护和扩展的应用程序.但是,随着功能模块数量(以及开发维护这些部件的人员)的不断增加,对项目实施控制的难度开始呈指数级增长. Sa ...
- 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统
在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...
- Taurus.MVC 微服务框架 入门开发教程:项目部署:1、微服务应用程序常规部署实现多开,节点扩容。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...
- 程序员是天生的软件UI设计师
一个软件项目,谁才是软件开发的主体,是软件UI设计师?还是程序员? 这还用问吗?当然是程序员拉.引用以下alienbat知友的一段评论:对于软件开发而言,码农的工作是必需的.设计师的工作是可选的. 举 ...
- GitHub这么火,程序员你不学学吗? 超简单入门教程 【转载】
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...
- 常见前端UI框架
祈澈姑娘 程序员一枚 本文作者祈澈姑娘,转载请声明 前端的技术日渐更新,最近得空,将前端常见的框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多. 1.L ...
- 前端UI框架和JS类库
一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...
- 2015年最全的移动WEB前端UI框架
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...
- 前端UI框架小汇总
前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...
随机推荐
- Debugging into .NET Core源代码的两种方式
一.前言 .NET开源时间还不长,因为一直在做YOYOFx的关系,所似我常常有更深入的了解.NET Core和ASP.NET Core内容的需求,并且.NET Core平台与之前版本的变化太大,这也导 ...
- 从零开始编写属于我的CMS:(六)插件
二三四五还没写,先写六吧(有道友说想看看插件部分). 这里是一 从零开始编写属于我的CMS:(一)前言 一,首先预定义接口 新建类库,WangCms.PluginInterface 新建两个类,一个实 ...
- CSS3梅花三弄特效
效果预览:http://hovertree.com/texiao/js/22/ 效果图: 代码如下: <html> <head> <meta http-equiv=&qu ...
- Oracle学习总结_day03_day04_条件查询_排序_函数_子查询
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! day03_条件查询_排序_函数 清空回收站: PUR ...
- android开发Preference的使用
1 .Preference是androidSDK提供的一个基类从API1就开始有了,用于显示界面给用户. 2 .在使用Preference显示activity时,此activity需要继承Pref ...
- 【工业串口和网络软件通讯平台(SuperIO)教程】六.二次开发导出数据驱动
SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1 导出数据接口的作用 在数据集成系统项目中,要么是自已集成其他厂家的设备,要么是其他厂家集成自己 ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- 爬虫的入门以及scrapy
一.简介 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟 ...
- sharepoint2013爬xls文件:Error initializing IFilter for extension的解决方案
最近sharepoint2013爬网出现: error initializing IFilter for extension '.xls' (Error code is 0x80030002). Th ...
- pod的SDK报错,Linker command failed with exit code1(use -v to see invocation)
错误1789个重复的符号: 原因是我用cocopads 导入了重复的SDK 环信的SDK EaseMobSDK: 不包含语音的 EaseMobSDKFull: 包含语音的 在Podfile中将导入E ...