Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分
时间:2020-05-21
本文章向大家介绍Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分,主要包括Bootstrap 之 Metronic 模板的学习之路 - (3)源码分析之 body 部分使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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.cnblogs.com/homehtml/p/12932646.html
- Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861C Did yo
- Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861B Which
- 信用卡安全问题:被用户忽视的识别码
- Python3快速排序
- Python3插入排序
- Python3冒泡排序
- Python Selenium设计模式-POM
- 【Python学习笔记之一】Python关键字及其总结
- 前后端分离了,然后呢?
- 【Python学习笔记之二】浅谈Python的yield用法
- LINUX中常用操作命令
- Java异常抛出及try,catch应用实例
- GitHub实战系列~2.把本地项目提交到github中 2015-12-10
- 前20名Python机器学习开源项目
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- AkShare-重要机构-伦敦金属交易所
- 为什么不推荐使用BeanUtils属性转换工具
- 从源码打造云原生时代的「Linux」——Kubernetes
- Django-models & QuerySet API
- [奇淫巧技]GitHub个人页的新玩法
- 一致性哈希的分析与实现
- 关系型数据库查询语言 SQL 和图数据库查询语言 nGQL 对比
- 目标检测之评价指标 - mAP
- sass的基础用法
- Golang Gin 实战(十四)| 文件托管、反向代理百度网站、自实现API网关
- ceph修复pg inconsistent
- 基于kubernetes的kong网关实战
- 移动端适配必须掌握的基本概念和适配方案
- [OHIF-Viewers]医疗数字阅片-医学影像-Redux中的reducer到底是什么,以及它为什么叫reducer?
- 【从零开始用Swift开发一个iOS应用(仿微博)】开篇-1. demo上手体验