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

stackfing 發布于2019-08-29 11:08 / 1982人閱讀

摘要：寫在前面的模板非常多，上有著各種各樣的免費及付費模板。概述是一個基于設計的自適應多用途的管理后臺模板。下一篇之模板的學習之路源碼分析之部分

寫在前面

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 部分

云服務器 GPU云服務器機器學習學習之路網站模板 bootstrap 機器學習之路 python學習之路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111444.html

Bootstrap 之 Metronic 模板的學習之路 - （6）自定義和擴展

摘要：你可以用此模板作為你應用程序的起點。上一篇之模板的學習之路主題布局配置下一篇之模板的學習之路前端自動化工具前面我們將 Metronic 的結構和源碼大致瀏覽了一遍，Metronic 整個文件包有三百多兆，在實際項目中，我們肯定用不到所有文件，這時，我們需要做一些自定義。自定義和擴展 CSS 部分要重載 Metronic 主題的 CSS 樣式，我們可以定制 ../assets/la...

MoAir 2019-08-29 11:15 評論0 收藏0
Bootstrap 之 Metronic 模板的學習之路 - （6）自定義和擴展

摘要：你可以用此模板作為你應用程序的起點。上一篇之模板的學習之路主題布局配置下一篇之模板的學習之路前端自動化工具前面我們將 Metronic 的結構和源碼大致瀏覽了一遍，Metronic 整個文件包有三百多兆，在實際項目中，我們肯定用不到所有文件，這時，我們需要做一些自定義。自定義和擴展 CSS 部分要重載 Metronic 主題的 CSS 樣式，我們可以定制 ../assets/la...

aaron 2019-08-20 10:48 評論0 收藏0
Bootstrap 之 Metronic 模板的學習之路 - （4）源碼分析之腳本部分

摘要：修復后得到合法的后在由布局引擎建立相應的對象。在標簽放置于標簽之后時，源碼被所有瀏覽器泛指上常見的修復為正常形式，即。上一篇之模板的學習之路源碼分析之部分下一篇之模板的學習之路主題布局配置上篇我們將 body 標簽主體部分進行了簡單總覽，下面看看最后的腳本部門。頁面結尾部分（Javascripts 腳本文件）我們來看看代碼最后的代碼，摘取如下： ...

piglei 2019-08-20 10:30 評論0 收藏0
Bootstrap 之 Metronic 模板的學習之路 - （3）源碼分析之 body 部分

摘要：的組成結構部分包含了，其中部分又包含了幾個部分。代碼如下圖內容展示截圖代碼截圖快捷欄展示截圖代碼截圖頁面底部展示截圖代碼截圖上一篇之模板的學習之路源碼分析之部分下一篇之模板的學習之路源碼分析之腳本部分 body 的組成結構 body 部分包含了 HEADER、CONTAINER、FOOTER，其中 CONTAINER 部分又包含了 SIDEBAR、CONTENT、QUICK SIDEB...

afishhhhh 2019-08-29 11:10 評論0 收藏0