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. 申请SSL证书怎样验证域名所有权

    申请域名型证书时,系统将提供以下三种方式验证域名的所有权,请根据自己的实际情况选择其中一种进行域名验证: 1.管理员邮箱验证 系统会向你选择的管理员邮箱 发送验证邮件,能够收到验证邮件,并点击邮件中验 ...

  2. [置顶] Java基础学习总结（34）——HTTP协议详解

    一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...

  3. mybatis源码阅读-执行器Executor(四)

    说明 前面二看到了 sqlSession最终是找到MapperStatement然后委托给Executer执行的 Executer到底做了什么 接口定义 public interface Execut ...

  4. iOS 通讯录编程【总结】

    第一大块儿:读取通讯录 1.iOS 6以上系统,争取获取用户允许: 初始化的时候须要推断.设备是否授权 -(id)init{ self = [super init]; [self createdABH ...

  5. QPS计算

    案例:公司xiaoyb性能测试评估 我们预估支持500家学校,每所学校300人,每天有10%的活跃率,每天有500*300*10%=15000人,每人每天平均请求20次,每天大概请求时间共8小时,80 ...

  6. Kafka编程实例

    编程 Producer是一个应用程序.它创建消息并发送它们到Kafka broker中.这些producer在本质上是不同.比方.前端应用程序.后端服务.代理服务.适配器对于潜在的系统,Hadoop对 ...

  7. luogu3382【模板】三分法

    给出一个N次函数,保证在范围[l,r]内存在一点x,使得[l,x]上单调增,[x,r]上单调减.试求出x的值. 看代码即可. #include <cstdio> #include < ...

  8. C++虚函数默认实参的注意事项

    我们都知道当成员函数是虚函数的时候,函数调用取决于调用函数的对象的类型而不是指针或者应用的类型.这就是C++中的多态. 那么一个虚函数的实参的缺省值是什么呢?例如如下代码: #include < ...

  9. oc50--@class1

    // // main.m #import <Foundation/Foundation.h> #import "Person.h" int main(int argc, ...

  10. hdu1704——floyd

    Problem Description there are N ACMers in HDU team.ZJPCPC Sunny Cup 2007 is coming, and lcy want to ...