本着不懂前端的程序員不是好美工的觀點,所以作為一個僅懂一點前端的程序員,為了成為一個好美工,所以只能用些取巧的方法偽裝一下.
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陰影樣式,很漂亮.可以根據需要引入不同的全局樣式.