metronic

metronic是一個(gè)基于Bootstrap 3.x的高級(jí)管理控制面板主題。是一套基于Twitter Bootstrap 3.3.4框架開始的多功能響應(yīng)式后臺(tái)管理和前臺(tái)開發(fā)模板，一個(gè)完全響應(yīng)式管理模板�；�于Bootstrap3框架。高度可定制的，易于使用。適合從小型移動(dòng)設(shè)備到大型臺(tái)式機(jī)很多的屏幕分辨率。包含7個(gè)主題，高達(dá)100個(gè)左右的實(shí)例頁(yè)面，非常豐富頁(yè)面展示效果，包括表單，表格，地圖，日歷…等等。

metronic可用于任意類型的網(wǎng)頁(yè)應(yīng)用：

Metronic可以用于各種形式的網(wǎng)站程序，如管理員后臺(tái)，管理儀表，電子商務(wù)后臺(tái)，CMS，CRM，SAAS，公司網(wǎng)站，電商網(wǎng)站，商務(wù)網(wǎng)站，信息展示站，博客等。Metronic的時(shí)尚，干凈，扁平化的設(shè)計(jì)，可以讓你的網(wǎng)站看起來很友好，很吸引人。Metronic模板包含了大量的插件和UI元素，并且可以在主流瀏覽器和平板設(shè)備，智能設(shè)備正常顯示。

瀏覽器兼容：iE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

對(duì)比了其他Bootstrap定制的影響式模版，這個(gè)功能與插件比較豐富。感覺大同小異如（免費(fèi)的-AdminLTE）

我很少做前端開發(fā)，本文是作為筆記和共同學(xué)習(xí)的過程。請(qǐng)讀者讀時(shí)勿偏激�？赡軙�(huì)顛覆你的前端觀念

軟件準(zhǔn)備：VS2013

用途和保障

主要用途：一體化的管理模版，構(gòu)建管理系統(tǒng)后臺(tái)，如CMS,HR,OA等管理系統(tǒng)必備�；ㄇ蔚能浖�比界面死板的同等軟件價(jià)格可賣出高達(dá)40%

能合并到所有語言前端，包括主流asp.net,JSP,PHP

（源源不斷的Bootstrap 和Metronic作為更新技術(shù)支持，除非推兔團(tuán)隊(duì)解散）

目錄

按目錄名稱可以看出包含了文檔（documentation），資源（resources），開始(start)，主題(theme與theme_trl)，說明readme.txt

打開readme我們可以看到我們只需要用theme這個(gè)文件夾即可。theme_rtl支持RTL，RTL顛覆我的編程習(xí)慣。

可以依次運(yùn)行theme-->templates-->adminX下的index效果。

然并卵，發(fā)現(xiàn)每一個(gè)admin對(duì)應(yīng)了admin_material_design，根據(jù)readme說明admin_material_design是對(duì)應(yīng)AngularJS版本的，不知道說得對(duì)比。

不懂AngularJS所以我們只用到正常版本的adminX

以上是部分截圖。右邊的設(shè)置可以設(shè)置布局的方式

把瀏覽器縮小看看平板下的效果同樣非常不錯(cuò)。

全功能列表

干凈的，直觀的和完全響應(yīng)的Metro風(fēng)格的設(shè)計(jì)（在所有主要瀏覽器，是平板電腦和）

500 +有效的模板頁(yè)面

Bootstrap 3.3.5框架

jQuery 1.10.2

6種顏色的主題

全Sass支持

完整的RTL支持

開發(fā)者友好的代碼

谷歌Open Sans字體

語言切換欄

多級(jí)菜單

臥式巨型菜單

電子商務(wù)

儀表板

訂單

秩序觀

產(chǎn)品

產(chǎn)品編輯

布局

固定的默認(rèn)標(biāo)題的布局

顯示/隱藏側(cè)邊欄

橫側(cè)邊欄菜單

橫向菜單的網(wǎng)頁(yè)實(shí)例

多用電子郵件模板

通過AJAX加載內(nèi)容

側(cè)邊欄關(guān)閉頁(yè)面示例

側(cè)邊欄固定頁(yè)面實(shí)例

空白頁(yè)的例子

盒裝頁(yè)面示例

非響應(yīng)盒裝的頁(yè)面布局

用戶界面功能

自定義標(biāo)簽和手風(fēng)琴

地鐵風(fēng)格的按鈕、表單元素

glyphicons一體化

字體（字體真棒真棒圖標(biāo)用3.2.0版）

圖表（jQuery上）

圓刻度盤（jQuery旋鈕）

地鐵時(shí)尚的滑塊（jQuery UI）

單選按鈕和復(fù)選框的Metro風(fēng)格（jQuery均勻）

粘粘的通知（jQuery的交流）

脈動(dòng)

自定義切換按鈕（啟動(dòng)按鈕）

jQuery UI模型

Windows 8風(fēng)格瓷磚

toastr通知

集成的樹視圖（引導(dǎo)樹）

集成的嵌套列表（jQuery嵌套）

離子范圍滑塊

noui范圍滑塊

圓刻度盤旋鈕

用戶界面的進(jìn)度條（jQuery blockUI）

標(biāo)簽輸入（jQuery標(biāo)簽輸入）

形式的東西

日期選擇器（引導(dǎo)日期選擇器）

時(shí)間選擇器（引導(dǎo)時(shí)間選擇器）

鐘面時(shí)間選擇器（引導(dǎo)鐘面時(shí)間選擇器）

日期范圍選擇器（引導(dǎo)日期范圍選擇器）

顏色選擇器（引導(dǎo)顏色選擇器）

2下拉菜單選擇

自定義選擇下拉（引導(dǎo)選擇）

多重選擇

自舉開關(guān)

紡紗

IP地址輸入

輸入掩碼

標(biāo)簽輸入

先進(jìn)的文件輸入

集成WYSIWYG編輯器（引導(dǎo)wysihtml5和CKEditor）

無限的表單控件

推進(jìn)形式布局（2列，加邊，行行分離，剝離，標(biāo)簽剝離）

推進(jìn)形式驗(yàn)證（jQuery表單驗(yàn)證插件）

形式x-editable

表單向?qū)?/p>

圖像的裁剪

多文件上傳

懸浮窗文件上傳

組件形式

網(wǎng)頁(yè)

促銷頁(yè)面

博客列表

博客

新聞列表

新聞發(fā)布

Metro風(fēng)格的時(shí)間表

投資組合頁(yè)面

關(guān)于我們

我們

常見問題

即將上市

鎖屏

綜合全日歷（jQuery完整的日歷）