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. everyday two problems / 3.1

    T1.string 题意: 给定由小写字母组成的长度为 n 的字符串 将其所有 n * (n + 1) / 2 个子串按字典序排序 输出第 k 个子串 k > (n * (n + 1) / 2) ...

  2. Leetcode 49.字母异位词分组

    字母异位词分组 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", " ...

  3. 给sunpinyin加速

    因为sunpinyin词库一大就会卡,因此需要自己添加一个脚本给sunpinyin加速. 加速的原理就是把词库添加到内存,现在内存都这么大,根本不在乎这么几兆,当然输入体验更重要啦- 首先先建一个脚本 ...

  4. Void 参数

    在C程序中如果在声明函数的时候如果没有任何参数那么需要将参数定义为void以此来限定此函数不可传递任何参数,如果不进行限定让参数表默认为空其意义是可以传递任何参数,这个问题的由来实际上是由于要兼容早期 ...

  5. LSB、MSB是什么单位

    最低有效位 (LSB: Least Significant Bit)   最低有效位(LSB)是给这些单元值的一个二进制整数位位置,就是,决定是否这个数字是偶数或奇数.LSB有时候是指最右边的位,因为 ...

  6. JavaScript中的call（）和apply（）方法，借此实现继承

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  7. SharePoint 2013 改动表单认证登录页面

    前 言 之前的博客我们介绍了怎样为SharePoint配置表单登陆,可是.登陆页面是丑.非常丑.非常丑.特别非常丑! 我们如今就介绍一下怎样定制SharePoint表单登陆页面! SharePoint ...

  8. Xcode HeaderDoc 教程（3）

    打开 MathAPI.h,将第一个 @param 标签的參数名由firstNumber 改动为 thirdNumber,然后编译. 有一个警告发生.甚至提出了改动建议.它不会影响不论什么事情,但有助于 ...

  9. ubuntu系统启动qtceator时提示：Qt5.5.1/Tools/QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库

    在ubuntu系统下安装好qt5.5后启动qtceator时提示:Qt5.5.1/Tools/QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库Qt5. ...

  10. mongoDB学习笔记——存取图片（C#)

    作为一个NoSql数据库的代表,存取多媒体数据,应该是强项吧?那么,图片在mongoDB里是如何存取的呢?(其实,关系型数据库存取图片也一点问题没有,所以我看NoSql的强项不在于是否存储多媒体,而在 ...