Bootstrap Metronic完全響應(yīng)式管理模板學(xué)習(xí)筆記
學(xué)習(xí)使用Bootstrap Metronic完全響應(yīng)式管理模板，具體內(nèi)容如下
1.簡(jiǎn)介
Bootstrap Metronic是一個(gè)基于Bootstrap 3.x的高級(jí)管理控制面板主題。Bootstrap Metronic - 是一個(gè)完全響應(yīng)式管理模板?；贐ootstrap3框架。高度可定制的，易于使用。適合從小型移動(dòng)設(shè)備到大型臺(tái)式機(jī)很多的屏幕分辨率。包含7個(gè)主題，高達(dá)100個(gè)左右的實(shí)例頁面，非常豐富頁面展示效果，包括表單，表格，地圖，日歷…等等。
對(duì)比了其他Bootstrap定制的影響式模版，這個(gè)功能與插件比較豐富。感覺大同小異如（免費(fèi)的-AdminLTE）
注：mvc4系列不會(huì)升級(jí)用metronic
軟件準(zhǔn)備：VS2013
2.資源
7個(gè)主題演示地址：http://www.keenthemes.com/preview/metronic/
3.用途和保障
主要用途：一體化的管理模版，構(gòu)建管理系統(tǒng)后臺(tái)，如CMS,HR,OA等管理系統(tǒng)必備。花俏的軟件比界面死板的同等軟件價(jià)格可賣出高達(dá)40%
能合并到所有語言前端，包括主流asp.net,JSP,PHP
（源源不斷的Bootstrap 和Metronic作為更新技術(shù)支持，除非推兔團(tuán)隊(duì)解散）
4.目錄
按目錄名稱可以看出包含了文檔（documentation），資源（resources），開始(start)，主題(theme與theme_trl)，說明readme.txt
打開readme我們可以看到我們只需要用theme這個(gè)文件夾即可。theme_rtl支持RTL，RTL顛覆我的編程習(xí)慣。
可以依次運(yùn)行theme-->templates-->adminX下的index效果?！?/p>
然并沒有，發(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ò)。
5.總結(jié)
我們只需用到theme下的templates為參照模版。
作者：YmNets
出處：http://ymnets.cnblogs.com/
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題： Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
- bootstrap學(xué)習(xí)筆記之初識(shí)bootstrap
- Bootstrap學(xué)習(xí)筆記之js組件（4）
- Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(1)
- Bootstrap開關(guān)(switch)控件學(xué)習(xí)筆記分享
- Bootstrap3學(xué)習(xí)筆記(三)之表格
- BootStrap3學(xué)習(xí)筆記(一)之網(wǎng)格系統(tǒng)
- Bootstrap教程JS插件滾動(dòng)監(jiān)聽學(xué)習(xí)筆記分享
- Bootstrap教程JS插件彈出框?qū)W習(xí)筆記分享
- bootstrap基礎(chǔ)知識(shí)學(xué)習(xí)筆記
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談JS中json數(shù)據(jù)的處理。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS布局之表單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法
在開發(fā)一個(gè)前端項(xiàng)目時(shí)需要用到Element-ui的el-tabs組件和Echart開源庫,當(dāng)兩者嵌套使用時(shí),我給Echart中的圖表寬度設(shè)置為了100%,但是實(shí)際的寬度卻只有100px,這篇文章主要給大家介紹了關(guān)于echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法,需要的朋友可以參考下2022-12-12
今天在群里看到有人要幻燈片的代碼，于是我自己也想了想，做個(gè)總結(jié)。常見的幻燈片切換無非就是輪播和漸變，不管哪種都是用定時(shí)器來逐步改變圖片或者圖片組的某種屬性來實(shí)現(xiàn)的2011-12-12
JavaScript中while循環(huán)的基礎(chǔ)使用教程
這篇文章主要給大家介紹了關(guān)于JavaScript中while循環(huán)的基礎(chǔ)使用教程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
兩種JS實(shí)現(xiàn)屏蔽鼠標(biāo)右鍵的方法
這篇文章主要介紹了兩種JS實(shí)現(xiàn)屏蔽鼠標(biāo)右鍵的方法，瀏覽者在訪問你網(wǎng)頁的時(shí)候就不能點(diǎn)擊右鍵，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
JavaScript二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單
這篇文章主要介紹了使用二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單，通過二維數(shù)組存儲(chǔ)城市列表項(xiàng),需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript計(jì)算正方形面積，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
使用Axios函數(shù)庫進(jìn)行網(wǎng)絡(luò)請(qǐng)求的操作指南
在現(xiàn)代的前端開發(fā)中,API調(diào)用是實(shí)現(xiàn)前后端數(shù)據(jù)交互的重要環(huán)節(jié),而在眾多的HTTP庫中,Axios以其簡(jiǎn)潔的語法、豐富的功能和易于擴(kuò)展的特性,成為了開發(fā)者的首選,本篇文章將深入介紹Axios的使用方法,2024-11-11
JavaScript創(chuàng)建對(duì)象的幾種方式小結(jié)
這篇文章主要介紹了 JavaScript 中創(chuàng)建對(duì)象的多種方式,包括字面量方式、構(gòu)造函數(shù)方式、原型模式、() 方法、ES6 類,并分別說明了它們的特點(diǎn)和適用場(chǎng)景,強(qiáng)調(diào)在實(shí)際編程中要根據(jù)需求選擇合適的方式以提高代碼質(zhì)量和性能,需要的朋友可以參考下2024-12-12