metronic是一個基于Bootstrap 3.x的高級管理控制面板主題。是一套基于Twitter Bootstrap 3.3.4框架開始的多功能響應式后臺管理和前臺開發(fā)模板,一個完全響應式管理模板;贐ootstrap3框架。高度可定制的,易于使用。適合從小型移動設備到大型臺式機很多的屏幕分辨率。包含7個主題,高達100個左右的實例頁面,非常豐富頁面展示效果,包括表單,表格,地圖,日歷…等等。
metronic可用于任意類型的網(wǎng)頁應用:
Metronic可以用于各種形式的網(wǎng)站程序,如管理員后臺,管理儀表,電子商務后臺,CMS,CRM,SAAS,公司網(wǎng)站,電商網(wǎng)站,商務網(wǎng)站,信息展示站,博客等。Metronic的時尚,干凈,扁平化的設計,可以讓你的網(wǎng)站看起來很友好,很吸引人。Metronic模板包含了大量的插件和UI元素,并且可以在主流瀏覽器和平板設備,智能設備正常顯示。
瀏覽器兼容:iE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
對比了其他Bootstrap定制的影響式模版,這個功能與插件比較豐富。感覺大同小異如(免費的-AdminLTE)
我很少做前端開發(fā),本文是作為筆記和共同學習的過程。請讀者讀時勿偏激?赡軙嵏材愕那岸擞^念
軟件準備:VS2013
用途和保障
主要用途:一體化的管理模版,構建管理系統(tǒng)后臺,如CMS,HR,OA等管理系統(tǒng)必備;ㄇ蔚能浖冉缑嫠腊宓耐溶浖䞍r格可賣出高達40%
能合并到所有語言前端,包括主流asp.net,JSP,PHP
(源源不斷的Bootstrap 和Metronic作為更新技術支持,除非推兔團隊解散)
目錄
按目錄名稱可以看出包含了文檔(documentation),資源(resources),開始(start),主題(theme與theme_trl),說明readme.txt
打開readme我們可以看到我們只需要用theme這個文件夾即可。theme_rtl支持RTL,RTL顛覆我的編程習慣。
可以依次運行theme-->templates-->adminX下的index效果。
然并卵,發(fā)現(xiàn)每一個admin對應了admin_material_design,根據(jù)readme說明admin_material_design是對應AngularJS版本的,不知道說得對比。
不懂AngularJS所以我們只用到正常版本的adminX
以上是部分截圖。右邊的設置可以設置布局的方式
把瀏覽器縮小看看平板下的效果同樣非常不錯。
全功能列表
干凈的,直觀的和完全響應的Metro風格的設計(在所有主要瀏覽器,是平板電腦和)
500 +有效的模板頁面
Bootstrap 3.3.5框架
jQuery 1.10.2
6種顏色的主題
全Sass支持
完整的RTL支持
開發(fā)者友好的代碼
谷歌Open Sans字體
語言切換欄
多級菜單
臥式巨型菜單
電子商務
儀表板
訂單
秩序觀
產(chǎn)品
產(chǎn)品編輯
布局
固定的默認標題的布局
顯示/隱藏側邊欄
橫側邊欄菜單
橫向菜單的網(wǎng)頁實例
多用電子郵件模板
通過AJAX加載內(nèi)容
側邊欄關閉頁面示例
側邊欄固定頁面實例
空白頁的例子
盒裝頁面示例
非響應盒裝的頁面布局
用戶界面功能
自定義標簽和手風琴
地鐵風格的按鈕、表單元素
glyphicons一體化
字體(字體真棒真棒圖標用3.2.0版)
圖表(jQuery上)
圓刻度盤(jQuery旋鈕)
地鐵時尚的滑塊(jQuery UI)
單選按鈕和復選框的Metro風格(jQuery均勻)
粘粘的通知(jQuery的交流)
脈動
自定義切換按鈕(啟動按鈕)
jQuery UI模型
Windows 8風格瓷磚
toastr通知
集成的樹視圖(引導樹)
集成的嵌套列表(jQuery嵌套)
離子范圍滑塊
noui范圍滑塊
圓刻度盤旋鈕
用戶界面的進度條(jQuery blockUI)
標簽輸入(jQuery標簽輸入)
形式的東西
日期選擇器(引導日期選擇器)
時間選擇器(引導時間選擇器)
鐘面時間選擇器(引導鐘面時間選擇器)
日期范圍選擇器(引導日期范圍選擇器)
顏色選擇器(引導顏色選擇器)
2下拉菜單選擇
自定義選擇下拉(引導選擇)
多重選擇
自舉開關
紡紗
IP地址輸入
輸入掩碼
標簽輸入
先進的文件輸入
集成WYSIWYG編輯器(引導wysihtml5和CKEditor)
無限的表單控件
推進形式布局(2列,加邊,行行分離,剝離,標簽剝離)
推進形式驗證(jQuery表單驗證插件)
形式x-editable
表單向導
圖像的裁剪
多文件上傳
懸浮窗文件上傳
組件形式
網(wǎng)頁
促銷頁面
博客列表
博客
新聞列表
新聞發(fā)布
Metro風格的時間表
投資組合頁面
關于我們
我們
常見問題
即將上市
鎖屏
綜合全日歷(jQuery完整的日歷)