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

WBOY
Freigeben: 2016-06-24 11:26:10
Original
1275 Leute haben es durchsucht

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

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

<!-- 页头一堆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  重要且必须,初始化一些布局<br />//之后的都是非必须的一些组件插件的初始化QuickSidebar.init(); // init quick sidebar  Demo.init(); // init demo featuresFormEditable.init(); //这个就是我们这个例子中的table组件初始化的地方});</script>
Nach dem Login kopieren

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

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

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

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage