首页 > 代码库 > (转)Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分
(转)Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分
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 部分
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。