资讯专栏INFORMATION COLUMN

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

afishhhhh / 833人阅读

摘要:的组成结构部分包含了,其中部分又包含了几个部分。代码如下图内容展示截图代码截图快捷栏展示截图代码截图页面底部展示截图代码截图上一篇之模板的学习之路源码分析之部分下一篇之模板的学习之路源码分析之脚本部分

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)源码分析之脚本部分

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111467.html

相关文章

  • Bootstrap Metronic 模板学习路 - (1)总览

    摘要:写在前面的模板非常多,上有着各种各样的免费及付费模板。概述是一个基于设计的自适应多用途的管理后台模板。下一篇之模板的学习之路源码分析之部分 写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板。Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者。觉得贵的,想必不用我说,你也会找到途径。:b ...

    stackfing 评论0 收藏0
  • Bootstrap Metronic 模板学习路 - (4)源码分析脚本部分

    摘要:修复后得到合法的后在由布局引擎建立相应的对象。在标签放置于标签之后时,源码被所有浏览器泛指上常见的修复为正常形式,即。上一篇之模板的学习之路源码分析之部分下一篇之模板的学习之路主题布局配置 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门。 页面结尾部分(Javascripts 脚本文件) 我们来看看代码最后的代码,摘取如下: ...

    piglei 评论0 收藏0
  • Bootstrap Metronic 模板学习路 - (6)自定义和扩展

    摘要:你可以用此模板作为你应用程序的起点。上一篇之模板的学习之路主题布局配置下一篇之模板的学习之路前端自动化工具 前面我们将 Metronic 的结构和源码大致浏览了一遍,Metronic 整个文件包有三百多兆,在实际项目中,我们肯定用不到所有文件,这时,我们需要做一些自定义。 自定义和扩展 CSS 部分 要重载 Metronic 主题的 CSS 样式,我们可以定制 ../assets/la...

    MoAir 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<