码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分

时间:2020-05-21 19:34:43      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:trap   cat   cgo   main   学习   arch   bootstra   菜单栏   描述   

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 模板的学习之路 - (2)源码分析之 head 部分
下一篇:Bootstrap 之 Metronic 模板的学习之路 - (4)源码分析之脚本部分

Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分

标签:trap   cat   cgo   main   学习   arch   bootstra   菜单栏   描述   

原文地址:https://www.cnblogs.com/homehtml/p/12932646.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!