不懂前端的程序員不是好美工--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格式