你的位置:首页 > 软件开发 > 网页设计 > 不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角

不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角

发布时间:2016-02-21 22:00:09
本着不懂前端的程序员不是好美工的观点,所以作为一个仅懂一点前端的程序员,为了成为一个好美工,所以只能用些取巧的方法伪装一下.metronic一个基于bootstrap的响应式的后台管理平台的UI框架,为我们提供了管理后台能用到的各种UI样式,因为是基于bootstrap,所以满足 ...

本着不懂前端的程序员不是好美工的观点,所以作为一个仅懂一点前端的程序员,为了成为一个好美工,所以只能用些取巧的方法伪装一下.

metronic一个基于bootstrap的响应式的后台管理平台的UI框架,为我们提供了管理后台能用到的各种UI样式,因为是基于bootstrap,所以满足响应式的UI设计,故同时支持在各种设备和屏幕分辨率下UI样式不会出现大的硬伤.可以做到一套UI兼容各种各种屏幕各种设备.

打开metronic目录下的start.htm文件,可以看到如下的视图:

不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角

框架内置了好几种主题颜色,随便选一个主题,按下html按钮会导向对应主题的页面预览页:

不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角

可以看到预览页中主要分为左侧的菜单,上侧的导航和右侧的内容页面及侧边栏这几部分组成,这个框架的整体布局大体就是这样的形式.当然在此基础上我们可以做一些布局的调整,比如去掉上面的导航右侧的边栏等.

左侧菜单中的各种选项就是这个框架为我们内置的各种UI样式,非常丰富,包含各种样式的UI组件表单等等.我们可以查看对应的页面文件来查看对应样式的前端代码.

因为这个是程序员视角的教程,所以不会在这里详细介绍前端的样式代码,但是呢为了更好的使用这个样式库,还是建议扫一眼bootstrap的教程.不会浪费多久时间.

bootstrap菜鸟教程

以上那个菜鸟教程其实已经是很简略的了,但是即便这样也不用看的太细致,只需要看一下第一部分的CSS,简单扫一下第二部分的布局组件即可.

然后这里我举一个实际的使用例子,比如我们打开metronic目录/theme/templates/admin/table_editable.html这个文件.

不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角

可以看到这是一个可编辑的table组件.查看table_editable.html的源码可以看到如下引入:

<!-- 页头一堆CSS的引入 --><!-- 页尾一堆js的引入--><script src='/images/loading.gif' data-original="../../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 重要且必须,初始化一些布局

原标题:不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。