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. noip模拟赛 SAC E#1 - 一道中档题 Factorial

    题目背景 数据已修改 SOL君(炉石主播)和SOL菌(完美信息教室讲师)是好朋友. 题目描述 SOL君很喜欢阶乘.而SOL菌很喜欢研究进制. 这一天,SOL君跟SOL菌炫技,随口算出了n的阶乘. SO ...

  2. 数学 找规律 Jzzhu and Sequences

    A - Jzzhu and Sequences   Jzzhu has invented a kind of sequences, they meet the following property: ...

  3. LINUX 内核内存管理

    https://linux-mm.org/ http://www.cnblogs.com/liloke/archive/2011/11/20/2255737.html

  4. android程序在调试时出现了套接字异常“java.net.SocketException: Permission denied”该如何解决

    Socket不能对外连接,错误不会被报出,调试的时候,能看到Exception, 一般是抛出 java.net.socketexception permission denied这个异常.只要你的程序 ...

  5. 一键免费升级Windows 10

    2015年3月18日,在深圳召开的微软Windows硬件project产业创新峰会(WinHEC)发布了一些震撼消息. 微软计划于今年夏天正式推出Windows 10操作系统.将在190个国家发布,总 ...

  6. Javaproject集成log4J 1.x

    log4j是Java开发平台中的日志管理工具,是Apache基金会的一个开源项目.它的作用能够简单的理解为在开发过程中替代system.out的功能. 1.在project中集成log4j: (1)在 ...

  7. hibernate之关于一对一单向，双向关联映射

    [hibernate]之关于一对一单向,双向关联映射 首先我们来看,Hibernate官方对于一对一单向关联的解释: 基于外键关联的单向一对一关联和单向多对一关联差点儿是一样的. 唯一的不同就是单向一 ...

  8. vijos - P1279Leave-绿光(数学归纳法 + python)

    P1279Leave-绿光 Accepted 标签:[显示标签] 背景 期待这一份幸运,和一份冲劲,多么奇异的际遇--. 燕姿在演唱完绿光这首歌后,出给了姿迷一个考题. 北欧有一个传说! 人一生中能看 ...

  9. crmjs区分窗口是否是高速编辑(2)

    随着crm的版本号不同,有些功能不能使用,这里提供了第二种写法: function loadFrom() {     var formType = Xrm.Page.ui.getFormType(); ...

  10. java 集合交并补

    通过使用泛型方法和Set来表达数学中的表达式:集合的交并补.在下面三个方法中都将第一个參数Set复制了一份,并未直接改动參数中Set. package Set; import java.util.Ha ...