欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-14 17:19:43
...
本着不懂前端的程序员不是好美工的观点,所以作为一个仅懂一点前端的程序员,为了成为一个好美工,所以只能用些取巧的方法伪装一下.

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的源码可以看到如下引入:

      

这个页面中引入的form-editable.js文件,实际就是我们自己需要根据业务逻辑和实际需求进行更改的js文件,其中包含table这个组件的UI样式功能实现,这里就需要看一下其中的js代码实现,简单的梳理一下这个组件的使用规则,然后我们将其中的代码全都复制到我们自己的js文件中,并根据需要进行一定的修改,最后只需要引入我们自己修改后的js文件即可.

以上就是这个metronic框架的程序员视角的简易应用流程.整体使用起来还是很方便的,基本只要找到样本样式,查看源码,梳理插件的js逻辑,修改,引入就可以得到外观效果很不错的UI界面了.

PS:在metronic目录\theme\assets\global\css下的全局样式,效果也很不错,尤其是其中的名字中带md的3d阴影样式,很漂亮.可以根据需要引入不同的全局样式.