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）源码分析之脚本部分