metronic是一個基於Bootstrap 3.x的高階管理控制面板主題。基於Bootstrap3框架。高度可自訂的,易於使用。適合從小型行動裝置到大型桌上型電腦很多的螢幕解析度。包含7個主題,高達100個左右的實例頁面,非常豐富頁面展示效果,包括表單,表格,地圖,日曆…等等。 metronic可用於任意類型的網頁應用:Metronic可用於各種形式的網站程序,如管理員後台,管理儀表,電子商務後台,CMS,CRM,SAAS,公司網站,電商網站,商務網站,資訊展示站,博客等。 Metronic的時尚,乾淨,扁平化的設計,可以讓你的網站看起來很友好,很吸引人。 Metronic模板包含了大量的插件和UI元素,並且可以在主流瀏覽器和平板設備,智慧型設備正常顯示。瀏覽器相容:iE8, IE9, IE10, IE11, firefox, Safari, Opera, Chrome比較了其他Bootstrap客製化的影響式模版,這個功能與外掛程式比較豐富。感覺大同小異如(免費的-AdminLTE)我很少做前端開發,本文是作為筆記和共同學習的過程。請讀者讀時勿偏激。可能會顛覆你的前端觀念軟體準備:VS2013用途與保障主要用途:一體化的管理模版,建構管理系統後台,如CMS,HR,OA等管理系統必備。花哨的軟體比界面死板的同等軟體價格可賣出高達40%能合併到所有語言前端,包括主流asp.net,JSP,PHP(源源不斷的Bootstrap 和Metronic作為更新技術支持,除非推兔團隊解散)目錄軟體截圖1按目錄名稱可以看出包含了文檔(documentation),資源(resources),開始(start),主題(theme與theme_trl),說明readme.txt開啟readme我們可以看到我們只需要用theme這個資料夾即可。 theme_rtl支援RTL,RTL顛覆我的程式設計習慣。可以依序運行theme-->templates-->adminX下的index效果。然並卵,發現每一個admin對應了admin_material_design,根據readme說明admin_material_design是對應AngularJS版本的,不知道說得對比。不懂AngularJS所以我們只用到正常版的adminX軟體截圖2以上是部分截圖。右邊的設定可以設定佈局的方式軟體截圖3把瀏覽器縮小看看平板下的效果同樣非常不錯。全功能清單乾淨的,直覺的和完全響應的Metro風格的設計(在所有主要瀏覽器,是平板電腦和)500 +有效的模板頁面Bootstrap 3.3.5框架jQuery 1.10.26種顏色的主題全Sass支持完整的RTL支援開發者友好的代碼谷歌Open Sans字體語言切換欄多層菜單臥式巨型菜單電子商務儀表板訂單秩序觀產品產品編輯佈局固定的默認標題的佈局顯示/隱藏側邊欄橫側邊欄選單橫向選單的網頁實例多用電子郵件範本透過AJAX載入內容側邊欄關閉頁面範例側邊欄固定頁面實例空白頁的範例盒裝頁面範例非回應盒裝的頁面佈局使用者介面功能自訂標籤和手風琴地鐵風格的按鈕、表單元素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表單精靈圖片的裁剪多檔案上傳懸浮窗檔案上傳元件形式網頁促銷頁面部落格清單部落格新聞清單新聞發佈Metro風格的時間表投資組合頁面關於我們我們常見問題即將上市鎖定畫面綜合全日曆(jQuery完整的日曆)