摘要:的組成結(jié)構(gòu)部分包含了,其中部分又包含了幾個(gè)部分。代碼如下圖內(nèi)容展示截圖代碼截圖快捷欄展示截圖代碼截圖頁面底部展示截圖代碼截圖上一篇之模板的學(xué)習(xí)之路源碼分析之部分下一篇之模板的學(xué)習(xí)之路源碼分析之腳本部分
body 的組成結(jié)構(gòu)
body 部分包含了 HEADER、CONTAINER、FOOTER,其中 CONTAINER 部分又包含了 SIDEBAR、CONTENT、QUICK SIDEBAR 幾個(gè)部分。body部分源碼折疊后截圖如下:
Header 頁面頂部Header contains of logo and top menu bar and it used in all pages.
頁面頂部(或頭部)應(yīng)用于所有的頁面,包含 logo 、頂部菜單欄等。
代碼如下圖(已折疊,下文同):
從截圖可見,在 header 結(jié)束后,有個(gè) header 和 content 的分割,其 class="clearfix" 主要是清除浮動(dòng)用,這樣上下兩塊內(nèi)容就相對(duì)獨(dú)立,方便布局。
Sidebar 側(cè)邊欄Sidebar contains of quick search form and main navigation menu.
側(cè)邊欄包含快速搜索和主要的導(dǎo)航菜單。
代碼如下圖:
Content 內(nèi)容Content consists of page title, breadcrumbs and page"s main body.
展示截圖:
代碼截圖:
Quick Sidebar 快捷欄Quick Sidebar contains of user chat, notifications and general settings form.
展示截圖:
代碼截圖:
Footer 頁面底部展示截圖:
代碼截圖:
上一篇:Bootstrap 之 Metronic 模板的學(xué)習(xí)之路 - (2)源碼分析之 head 部分
下一篇:Bootstrap 之 Metronic 模板的學(xué)習(xí)之路 - (4)源碼分析之腳本部分
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/111467.html
摘要:寫在前面的模板非常多,上有著各種各樣的免費(fèi)及付費(fèi)模板。概述是一個(gè)基于設(shè)計(jì)的自適應(yīng)多用途的管理后臺(tái)模板。下一篇之模板的學(xué)習(xí)之路源碼分析之部分 寫在前面 bootstrap 的模板非常多,Envato 上有著各種各樣的免費(fèi)及付費(fèi)模板。Metronic 是我最喜歡的模板之一(看一眼就喜歡上的那種),當(dāng)前售價(jià) $28 ,覺得贊的,不妨支持一下作者。覺得貴的,想必不用我說,你也會(huì)找到途徑。:b ...
摘要:修復(fù)后得到合法的后在由布局引擎建立相應(yīng)的對(duì)象。在標(biāo)簽放置于標(biāo)簽之后時(shí),源碼被所有瀏覽器泛指上常見的修復(fù)為正常形式,即。上一篇之模板的學(xué)習(xí)之路源碼分析之部分下一篇之模板的學(xué)習(xí)之路主題布局配置 上篇我們將 body 標(biāo)簽主體部分進(jìn)行了簡(jiǎn)單總覽,下面看看最后的腳本部門。 頁面結(jié)尾部分(Javascripts 腳本文件) 我們來看看代碼最后的代碼,摘取如下: ...
摘要:你可以用此模板作為你應(yīng)用程序的起點(diǎn)。上一篇之模板的學(xué)習(xí)之路主題布局配置下一篇之模板的學(xué)習(xí)之路前端自動(dòng)化工具 前面我們將 Metronic 的結(jié)構(gòu)和源碼大致瀏覽了一遍,Metronic 整個(gè)文件包有三百多兆,在實(shí)際項(xiàng)目中,我們肯定用不到所有文件,這時(shí),我們需要做一些自定義。 自定義和擴(kuò)展 CSS 部分 要重載 Metronic 主題的 CSS 樣式,我們可以定制 ../assets/la...
閱讀 2933·2023-04-25 17:59
閱讀 760·2023-04-25 15:05
閱讀 727·2021-11-25 09:43
閱讀 3107·2021-10-12 10:13
閱讀 3612·2021-09-27 13:59
閱讀 3637·2021-09-23 11:21
閱讀 3967·2021-09-08 09:35
閱讀 637·2019-08-29 17:12