Bootstrap栅格系统概述
Bootstrap栅格系统概述
- 1 栅格系统简介
- 1.1 栅格系统概述
- 1.2 实现简单版栅格系统
- 2 Bootstrap布局容器
- 2.1 布局容器
- 2.2 .container-fluid类
- 2.3 container类
- 3 栅格系统的基本使用
- 3.1 栅格系统的行和列
- 3.2 学生信息表格案例
- 4 栅格系统的屏幕适配
- 4.1 栅格系统的类前缀
- 4.3 利用栅格系统实现导航栏效果
- 5 栅格系统中列的操作
- 5.1 栅格系统中的列嵌套
- 5.2 栅格系统中的列偏移
1 栅格系统简介
1.1 栅格系统概述
栅格系统（Grid Systems），即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版。
后来，栅格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让网页根据不同的显示终端展示不同页面结构。例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。
1.2 实现简单版栅格系统
1、编写HTML代码
<div class="row"><header>首页</header></div><div class="row"><nav class="col1">导航栏</nav><div class="col2">主要内容</div><aside class="col1">侧边栏</aside></div><div class="row"><footer>页尾</footer></div>
2、编写CSS样式
.row {width: 100%;}.row::after {/*清除浮动*/clear: left;content: "";/*表示元素内容以块级显示*/display: table;}/*匹配class属性值以col开头的元素*/[class^="col"] {float: left;background-color: #e0e0e0;}.col1 {width: 25%;}.col2 {width: 50%;}/*媒体查询：查询浏览器窗口的大小,根据浏览器窗口的大小设置页面的显示结构*/@media(max-width:768px) {.row {width: 100%;}[class^="col"] {float: none;width: 100%;}}
当浏览器窗口大于768px时，导航、主要内容和侧边栏3个模块呈横向排列。
当浏览器窗口小于或等于768px时，导航、主要内容和侧边栏3个模块呈纵向排列。
2 Bootstrap布局容器
2.1 布局容器
容器是Bootstrap中最基本的布局元素，容器用于在其中容纳、填充一些内容，以及有时需要使内容居中。
在实现Bootstrap页面布局容器之前，需要了解设备屏幕的尺寸。
| 屏幕大小 | 常见宽度范围 |
|---|---|
| 超小屏幕 | <576px |
| 平板 | ≥576px |
| 桌面显示器 | ≥768px |
| 大桌面显示器 | ≥992px |
| 超大桌面显示器 | ≥1200px |
在前面讲解的内容中，媒体查询需要使用@media关键字检测设备的宽度变化。
在Bootstrap中，我们不需要编写媒体查询的代码，而是使用一些内置的类名，用来自动检测不同的设备的宽度。
| 类名 | 说明 |
|---|---|
| container | 它在每个响应断点处设置了一个max-width最大宽度 |
| container-fluid | 它在每个响应断点处设置布局容器的宽度为100% |
| container-{breakpoint} | 它在每个响应断点处设置布局容器的宽度为100%，直到达到指定的断点为止。 |
每个容器中的.container-fluid和.container等类，以及每个断点之间的比较。
| 类名 | 超小设备<576px | 平板≥576px | 桌面显示器≥768px | 大桌面显示器≥992px | 超大桌面显示器≥1200px |
|---|---|---|---|---|---|
| container | 100% | 540px | 720px | 960px | 1140px |
| container-sm | 100% | 540px | 720px | 960px | 1140px |
| container-md | 100% | 100% | 720px | 960px | 1140px |
| container-lg | 100% | 100% | 100% | 960px | 1140px |
| container-xl | 100% | 100% | 100% | 100% | 1140px |
| container-fluid | 100% | 100% | 100% | 100% | 100% |
2.2 .container-fluid类
Bootstrap 4中的.container-fluid类是一种占据全部视口的容器。接下来使用.container-fluid类演示在不同设备宽度下页面元素的显示效果。
<div class="container-fluid">橘猫吃不胖</div><style>div {background-color: orange;}</style>
响应式布局的容器是固定宽度，当改变浏览器窗口大小时，即在特大宽屏设备(≥1200px)、大屏设备(≥992px)、中屏设备(≥768px)、小屏设备(≥576px)和超小屏设备（<576px），页面中的div元素的宽度始终为页面宽度的100% 。
2.3 container类
Bootstrap 4中的.container类用于固定宽度并支持响应式布局的容器。
.container类的最大宽度根据移动端设备屏幕自动设置成100%、540px、720px、960px和1140px。
当浏览器窗口宽度大于等于1200px时。
当浏览器窗口宽度大于等于992px时。
当浏览器窗口宽度大于等于768px时。
当浏览器窗口宽度大于等于576px时。
当浏览器窗口宽度小于576px时。
3 栅格系统的基本使用
3.1 栅格系统的行和列
Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。
开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。
栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。
Bootstrap栅格系统的基本使用方式。
1、Bootstrap栅格系统为不同屏幕宽度定义了不同的类，直接为元素添加类名即可。
2、行必须包含在布局容器中，以便为其赋予合适的排列和内补。
3、通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。
4、行使用样式.row，列使用样式.col-*-*，内容应当放置于列内，列大于12时，将会另起一行排列。
3.2 学生信息表格案例
案例实现思路：
1、首先需要在布局容器中创建一个类名为row的div元素作为行；
2、然后在行的容器内部创建列。布局容器中的行和列就构成了栅格系统。
3、栅格系统中的行和列类似于表格中的行和列。
1、编写HTML代码
<div class="container"><div class="row"><div class="col-md-4">姓名</div><div class="col-md-4">年龄</div><div class="col-md-4">性别</div></div><div class="row"><div class="col-md-4">张三</div><div class="col-md-4">25</div><div class="col-md-4">男</div></div></div>
2、编写CSS样式
.row {background-color: #eee;font-size: 30px;}.col-md-4 {border: 1px solid #fff;text-align: center;}
当浏览器显示宽度大于992px时，效果如下：
当浏览器宽度大于768px时，效果如下：
当浏览器宽度小于768px时，效果如下：
4 栅格系统的屏幕适配
4.1 栅格系统的类前缀
栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-*、.col-sm-*、.col-md-*、.col-lg-*和.col-xl-*类名。当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构。
| 超小设备<576px | 平板≥576px | 桌面显示器≥768px | 大桌面显示器≥992px | 超大桌面显示器≥1200px | |
|---|---|---|---|---|---|
| container最大容器宽度 | （自动）100% | 540px | 720px | 960px | 1140px |
| 类前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。
col-栅格的数量(设置超小设备)；
col-sm-栅格的数量(设置平板)；
col-md-栅格的数量(设置桌面显示器)；
col-lg-栅格的数量(设置大桌面显示器)；
col-xl-栅格的数量(设置超大桌面显示器)。
示例：不同的屏幕下设置不同的列的宽度
1、编写HTML代码部分
<div class="container"><div class="row"><div class="col-sm-4 col-md-6">第一列</div><div class="col-sm-4 col-sm-6">第二列</div><div class="col-sm-4 col-sm-6">第三列</div></div></div>
2、编写CSS样式
.row {background-color: #eee;}.col-sm-4 {background-color: #eee;border: 1px solid #fff;text-align: center;font-size: 30px;}
当浏览器显示大于992px时，效果如下：
当浏览器显示大于768px时，效果如下：
当浏览器显示屏小于768px时，效果如下：
4.3 利用栅格系统实现导航栏效果
导航栏的实现思路：
1、首先定义导航栏页面结构，通过Bootstrap栅格系统中的.container设置导航栏的布局容器。
2、在导航栏布局容器的每一行中设置不同的列数。
3、在中等屏幕设备下，占3份，即每列宽度为33.33%；
4、在小屏幕设备下，占12份，即每列宽度为100%。然后再去定义导航栏的页面样式。
1、HTML代码如下
<div class="container"><ul class="row"><li class="col-md-3 col-sm-12">首页</li><li class="col-md-3 col-sm-12">新闻资讯</li><li class="col-md-3 col-sm-12">联系我们</li><li class="col-md-3 col-sm-12">客服服务</li></ul></div>
2、CSS样式如下
* {margin: 0;padding: 0;}li {list-style: none;}.row {margin-bottom: 0;}.container {background-color: #eee;}.col-sm-12 {text-align: center;padding: 10px;font-size: 30px;}li:hover {background-color: white;}
当浏览器显示大于992px时，效果如下：
当浏览器显示大于768px时，效果如下：
当浏览器显示小于768px时，效果如下：
5 栅格系统中列的操作
5.1 栅格系统中的列嵌套
栅格系统中内置的栅格系统可以将内容再次嵌套。
实现的主要思路：
我们在现有的div.col-md-*元素的内部，再去添加一个新的div.row元素和一系列的div.col-md-*元素。
1、编写HTML代码
<div class="container"><div class="row"><div class="col-md-4"><div class="row"><div class="col-md-6">第一列</div><div class="col-md-6">第二列</div></div></div><div class="col-md-4">第二列</div><div class="col-md-4"> 第三列</div></div></div>
2、编写CSS样式
.row>div {height: 50px;background-color: #eee;}.col-md-4 {border: 1px solid #fff;text-align: center;line-height: 50px;font-size: 30px;}.col-md-6 {border: 1px solid rebeccapurple;}
5.2 栅格系统中的列偏移
栅格系统：使用.offset-md-*类将列向右侧偏移，
主要是通过使用.offset-md-*获取到当前元素并且增加了当前元素左侧的边距（margin）来实现的。
md可以使用sm、xl和lg等替代，分别表示在不同屏幕下设置列的偏移。
1、编写HTML代码
<div class="container"><div class="row"><div class="col-md-3">左侧</div><div class="col-md-3 offset-md-6">右侧</div></div></div>
2、编写CSS样式
.row div {height: 50px;background-color: #eee;font-size: 30px;}
当修改.offset-md-6中的份数6时，页面效果会发生变化。当小于6份时，右侧盒子向左侧移动，如设置份数为2，刷新浏览器。
将HTML中.container容器的内容进行替换。
<div class="container"><!-- 如果只有一个盒子，偏移 = (12 - 8) / 2 --><div class="row"><div class="col-md-8 offset-md-2">中间盒子</div></div></div>
当修改offset-md-2中的份数2时，页面效果会发生变化。修改的份数大于2时，中间盒子会向右侧移动：
当数值大于等于12或者小于等于0时，中间盒子左侧对齐。
Bootstrap栅格系统概述相关推荐
- Bootstrap 栅格系统 理解与总结
Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
- Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 如何使用BOOTSTRAP 栅格系统？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用BOO ...
- bootstrap 栅格系统实现类似table跨行
2019独角兽企业重金招聘Python工程师标准>>> 通过bootstrap 栅格系统实现类似table跨行 的效果,如下: 具体代码如下: <div class=" ...
- Bootstrap栅格参数
Bootstrap栅格参数 跨设备组合定义 定义一行,在中等分辨率下是8:4,在超小分辨率下是6:6,在小分辨率下是3:6 <hr /> <div class="row&q ...
- BootStrap栅格之间留出空隙
BootStrap栅格系统可以把我们的container容器划分为若干等分,如果想要每个部分之间留出一定的空隙,我们很可能首先想到的方法就是用margin外边距来使它们分离从而产生空隙,这样做真的的可 ...
- Bootstrap栅格布局
1.栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin ...
- Bootstrap栅格布局解析
文章目录 栅格布局 初始栅格 栅格布局源码 grid.less mixin中的grid.less clearfix.less 栅格布局源码分析 流体容器&固定容器公共样式 @grid-gutt ...
- Bootstrap栅格系统扩展 五格
Bootstrap栅格系统布局的魅力是毋容置疑的,但是再好的东西也会有不完美的地方,比如当布局上需要水平排列5列平分宽度时,bootstrap就显得比较尴尬了,这时候就需要老司机按照它的命名风格自定义 ...
最新文章
- JVM 史上最最最完整深入解析（12000 字噢）
- 盘点Java框架常用的3大底层技术！
- redistemplate分布式锁实现_基于 Redis SETNX 实现分布式锁
- 【大型网站技术实践】初级篇：借助LVS+Keepalived实现负载均衡
- 转：ESRI矢量数据格式简介
- matlab调用时间序列工具箱,matlab时间序列工具箱
- Linux 命令之 whois 命令-用于查找并显示用户信息
- CC1310在868MHz的电路设计
- Qt工作笔记-QML自定义圆形进度条（C++后端处理数据）
- 帆软报表 js 调用sql_SQL Server中的报表–创建由先前创建的主报表调用的基于矩阵的子报表
- [译] 用 Swift 创建自定义的键盘
- 项目经理的10条规则
- scala在线视频学习
- 【软件体系结构】软件体系结构风格
- Jquery实现简单轮播图效果
- jQuery，实现想弹出什么，弹出什么（弹出提示、弹出一个新的页面等等）
- Python 修改python插件包的默认安装路径
- DECA：基于单张静态图像，进行 3D 人脸建模
- office提示为什么要冒险的解决办法
- 没有基础能学会UI设计吗 有没有学习路线推荐