Bootstrap 之 Metronic 模板的學習之路 - （3）源碼分析之 body 部分

body 的組成結構

body 部分包含了 HEADER、CONTAINER、FOOTER，其中 CONTAINER 部分又包含了 SIDEBAR、CONTENT、QUICK SIDEBAR 幾個部分。body部分源碼摺疊後截圖以下：

Header 頁面頂部

Header contains of logo and top menu bar and it used in all pages.

頁面頂部（或頭部）應用於全部的頁面，包含 logo 、頂部菜單欄等。

代碼以下圖（已摺疊，下文同）：

從截圖可見，在 header 結束後，有個 header 和 content 的分割，其 class="clearfix" 主要是清除浮動用，這樣上下兩塊內容就相對獨立，方便佈局。

Sidebar 側邊欄

Sidebar contains of quick search form and main navigation menu.

側邊欄包含快速搜索和主要的導航菜單。

代碼以下圖：

Content 內容

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 模板的學習之路 - （2）源碼分析之 head 部分
下一篇：Bootstrap 之 Metronic 模板的學習之路 - （4）源碼分析之腳本部分