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. Q - Period II

    For each prefix with length P of a given string S,if S[i]=S[i+P] for i in [0..SIZE(S)-p-1], then the ...

  2. [bzoj2086][Poi2010]Blocks_单调栈_双指针

    Blocks bzoj-2086 Poi-2010 题目大意:题目链接. 注释:略. 想法:首先,不难发现,如果连续的一段数的平均值不小于输入的k的话,这段数是满足题意的. 所以,我们再次简化一下:将 ...

  3. Spring MVC-表单（Form）标签-文件上传（File Upload）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...

  4. java 调用 库文件错误查找方法

    第一步首先找到 backtrace:keyword,然后找到都应的库文件 出错的地方 pc 0000088b  /system/lib/libNDK_04.so (SayHello+98). 08-1 ...

  5. Git 主要的工作流程

    Git使用个进制字符的SHA- Hash来唯一标识对象 如:e98757d0598ab6eeaf1df0d87dd00826048bd80b git 有种对象 1.blob 表示文本文件,二进制文件或 ...

  6. C++ 句柄类的原理以及设计

    句柄类存在的意义是为了弥补将派生类对象赋给基类对象时发生的切片效应.比如以下的程序: multimap<Base> basket; Base base; Derived derive; b ...

  7. python统计ES存储空间占用的代码

    import os from os.path import join, getsize def get_dir_size(dir, suffix_filter=None): size = 0L if ...

  8. Microsoft ASP.NET SignalR

    SignalR类似与JavaScript实时框架,如Socket.IO.SignalR能够完成客户端向服务器的异步通信,并同时支持服务器向浏览器客户端推送事件.SignalR的连接通过日益流行的Web ...

  9. poj 2142

    Ms. Iyo Kiffa-Australis has a balance and only two kinds of weights to measure a dose of medicine. F ...

  10. B1303 [CQOI2009] 中位数图 数学

    想明白算法之后特别水,因为b只有可能出现一次,所以直接在b的左右找就行了,比他大的为1,比他小的为-1,然后维护前缀和就行了. 假如b有可能出现多次呢?按照这种方法好像也很好办,就是枚举每个点就行了, ...