不懂前端的程序员不是好美工--UI框架metronic使用教程--程序员视角_html/css_WEB-ITnose

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

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

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

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

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

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

bootstrap菜鸟教程

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

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

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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

不懂前端的程序员不是好美工--UI框架metronic使用教程--程序员视角_html/css_WEB-ITnose

不懂前端的程序员不是好美工--UI框架metronic使用教程--程序员视角_html/css_WEB-ITnose:本着不懂前端的程序员不是好美工的观点,所以作为一个仅懂一点前端的程序员,为了成为一个好美工,所以只能用些取巧的方法伪装一下. metronic一个基于bootstrap的响应式的后台管理平台的UI框架,为我们提供了管理后台能用到的各种UI样式,因为是基于bootst

推荐度：

点击下载本文 文档为doc格式