Bootstrap 之 Metronic 模板的學習之路 - （1）總覽

寫在前面

bootstrap 的模板很是多，Envato 上有着各類各樣的免費及付費模板。Metronic 是我最喜歡的模板之一（看一眼就喜歡上的那種），當前售價 $28 ，以爲讚的，不妨支持一下做者。以爲貴的，想必不用我說，你也會找到途徑。:b

目錄結構

拿到 Metronic 後，能夠看一下他的文件目錄

• _documentation: 說明文檔，個人學習就是從看這文檔開始，下面的會有部分摘錄和體會。

• _resources：PSD 設計源碼，你若是想在其基礎上從新設計，不妨看看。

• start.html和_start文件夾：模板預覽開始的地方，打開 start.html 就能看到所有 7 個模板的展現，沒有下載的朋友，也可移步官網演示進行查看。；

• theme：全部 Metronic 風格都在這文件夾裏面，你能夠挑一個佈局做爲本身的開發起點；

• theme_rtl: 鏡面佈局的模板，這種界面佈局根據阿拉伯語、波斯語等RTL語言而反轉。

概述

Metronic is a responsive and multipurpose admin theme powered with Twitter Bootstrap 3.3.6 Framework. Metronic can be used for any type of web applications: custom admin panels, admin dashboards, CMS, CRM, SAAS and more. Metronic has a sleek, clean and intuitive metro & flat balanced design which makes your next project look awesome and yet user friendly. Metronic has a huge collection of plugins and UI components and works seamlessly on all major web browsers, tablets and phones.

Metronic 是一個基於 Bootstrap 3.* 設計的自適應、多用途的管理後臺模板。Metronic 被普遍應用於各類 web 應用：定製化管理控制檯、CMS, CRM, SAAS 以及更多。它有着平滑、清爽、簡潔的設計，讓你的項目能顯得友好卻又高大上。Metronic 有着大量的插件和 UI 組件，而且能夠和諧地工做在各個主流瀏覽器、平板和手機上。

We put a lot of love and effort to make Metronic a useful tool for everyone and now Metronic comes with 7 complete admin layouts. We are keen to release continuous long term updates and dozens of new features will be coming soon in the future releases. Once you purchased Metronic, you will be entitled to free download of all future updates for the same license.

咱們很是用心、努力地去讓 Metronic 變爲一個對每一個人都有用的工具，如今 Metronic 已經有了 7 個完整的管理模板設計。（後面懶得翻譯，由於我翻譯水平太爛啦^_^）

We are keen to release continuous long term updates and dozens of new features will be coming soon in the future releases. Once you purchased Metronic, you will be entitled to free download of all future updates for the same license.

(懶得翻譯，一句話，你只要有一個 license 就能夠免費下載全部的更新。)

Author: KeenThemes
Contact: support@keenthemes.com
Follow: twitter.com/keenthemes
Like: facebook.com/keenthemes
Dribbble: dribbble.com/keenthemes
Created On: 13/02/2013
Updated On: 10/07/2016

預覽效果

官網首頁宣傳圖

主題1的截圖

手機等小尺寸屏顯示效果

更多預覽效果參加官網 7個主題演示地址：http://www.keenthemes.com/pre...

模板結構

All template files have fixed structure consisting of header, mega menu, top menu, user bar, sidebar menu, quick sidebar, content and footer as shown below:

全部的模板文件都有着固定結構，包括：header, mega menu, top menu, user bar, sidebar menu, quick sidebar, content 和 顯示在底部的 footer。

---

下一篇：Bootstrap 之 Metronic 模板的學習之路 - （2）源碼分析之 head 部分