https://segmentfault.com/a/1190000006697252

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 模板的学习之路 - （3）源码分析之 body 部分的更多相关文章

  1. Bootstrap 之 Metronic 模板的学习之路 - （1）总览

    写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板.Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者 ...

  2. （转）Bootstrap 之 Metronic 模板的学习之路 - （2）源码分析之 head 部分

    https://segmentfault.com/a/1190000006684122 下面,我们找个目录里面想对较小的文件来分析一下源码结构,我们可以看到,page_general_help.htm ...

  3. （转）Bootstrap 之 Metronic 模板的学习之路 - （1）总览

    https://segmentfault.com/a/1190000006673582#articleHeader0 写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付 ...

  4. （转）Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分

    https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...

  5. （转）Bootstrap 之 Metronic 模板的学习之路 - （5）主题&布局配置

    https://segmentfault.com/a/1190000006736457 Theme Setup 主题配置 Metronic comes with 6 color themes,defa ...

  6. (转）Bootstrap 之 Metronic 模板的学习之路 - （6）自定义和扩展

    https://segmentfault.com/a/1190000006815041 前面我们将 Metronic 的结构和源码大致浏览了一遍,Metronic 整个文件包有三百多兆,在实际项目中, ...

  7. （转）Bootstrap 之 Metronic 模板的学习之路 - （7）GULP 前端自动化工具

    https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...

  8. memcached学习笔记——存储命令源码分析下篇

    上一篇回顾:<memcached学习笔记——存储命令源码分析上篇>通过分析memcached的存储命令源码的过程,了解了memcached如何解析文本命令和mencached的内存管理机制 ...

  9. memcached学习笔记——存储命令源码分析上篇

    原创文章,转载请标明,谢谢. 上一篇分析过memcached的连接模型,了解memcached是如何高效处理客户端连接,这一篇分析memcached源码中的process_update_command ...

随机推荐

  1. Java基础学习总结（74）——Java常见笔试题及答案汇总

    1. 下面哪些是合法的标识符?(ABE )--标识符 A. $persons B. TwoUsers C. *point D. this E. _endline 2. 下面程序运行的结果是( D )- ...

  2. 洛谷——P1106 删数问题

    https://www.luogu.org/problem/show?pid=1106 题目描述 键盘输入一个高精度的正整数N,去掉其中任意k个数字后剩下的数字按原左右次序将组成一个新的正整数.编程对 ...

  3. backup script

    #!/bin/bash ##################################################### # export the whole database use ex ...

  4. 2015 测试赛 大神和小伙伴 hihoCoder

    立方和公式和平方和公式.表示从来不记得这些公式... 每库礼物不同数量相同,总数=1+2+...+n=(n+1)*n/2 选取礼物的可能性的最大值为[(n+1)*n/2]^3 选取礼物价值重复两次的总 ...

  5. [E2E] Visual Differing Tests with Puppeteer and PixelMatch

    Take your end to end tests to the next level by comparing your current application's view with an al ...

  6. HDU--1054--Strategic Game【最小点覆盖】

    链接:pid=1054">http://acm.hdu.edu.cn/showproblem.php?pid=1054 题意:一个熊孩子玩策略游戏,他须要用最少的士兵守卫最多的道路.假 ...

  7. 读取到配置文件的C语言的接口实现

    /*********************************************************************  * Author  : Samson  * Date   ...

  8. A*（也叫A star, A星）寻路算法Java版

    寻路算法有非常多种,A*寻路算法被公觉得最好的寻路算法. 首先要理解什么是A*寻路算法,能够參考这三篇文章: http://www.gamedev.net/page/resources/_/techn ...

  9. 《Java编程思想》笔记

    第十章 (1)当生成一个内部类的对象时.此对象 与制造他的外围对象之间就有了一种联系,所以它能訪问其外围对象的全部成员,而不须要不论什么特殊条件. 此外,内部类还拥有其它外围类的全部元素的訪问权. ( ...

  10. SQL SEVER 死锁// 解除死锁

    SQL SEVER 死锁 USE mastergo CREATE PROC killspid (@dbname VARCHAR (20))AS   BEGIN      DECLARE @sql NV ...