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. Package pdftex.def Error: PDF mode expected, but DVI mode detected!

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51646781 在如下使用LaTeX编译 ...

  2. HDU - 1403 - Longest Common Substring

    先上题目: Longest Common Substring Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  3. 有用的生活有关的website

    1. 如何快速download mpa3 from youtube a. google "youtube download" 2. 打开https://y2mate.com 3. ...

  4. Spring——BeanFactory

    Spring容器 什么是Spring容器 Spring容器是Spring的核心,它可以创建对象,把他们关联在一起,配置各个对象,并管理每个对象的整个生命周期.Spring容器使用依赖注入(DI)来管理 ...

  5. 洛谷 P2959 [USACO09OCT]悠闲漫步The Leisurely Stroll

    P2959 [USACO09OCT]悠闲漫步The Leisurely Stroll 题目描述 Bessie looks out the barn door at the beautiful spri ...

  6. keras 与tensorflow 混合使用

    keras 与tensorflow 混合使用 tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > t ...

  7. python 使用scapy编写DNS Fuzzer

    1. 描写叙述 使用scapy库,编写一个DNS Fuzzer工具,并測试.在这之前.先说明一下DNS协议请求包是封装在IP包中的UDP包(有些情况也可使用TCP)中.且UDP的端口为53. 进入sc ...

  8. [Java 并发] Java并发编程实践 思维导图 - 第四章 对象的组合

    依据<Java并发编程实践>一书整理的思维导图. 第一部分: 第二部分:

  9. ExtJs--06--Ext.WindowGroup相关方法简单使用

    Ext.onReady(function(){ //用windowGroup对象去操作多个window窗体 var winG = new Ext.WindowGroup(); for (var i = ...

  10. 从头认识java-15.2 Collection的经常用法（2）-注意点

    上一章节我们讲述了Collection的经常用法.还有之前的章节我们介绍了Collection的addAll方法,这一章节我们介绍一下它的注意点. 注意点就是,在经常用法里面,基本都是可选操作. 什么 ...