定义
-
栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局
-
我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。
-
在一个有限的、固定的平面上，用水平线和垂直线，将平面划分成有规律的一系列“格子”，并依托这些格子、或以格子的边线为基准线，来进行有规律的版面布局。也就是在我们的实际开发中，将一行等比例的进行划分达到我们需要的效果。
我么可以将一行的宽度进行二等分
我们也可以将一行的宽度进行三等分
以此类推，当将我们的格子进行12等分的时候,那就跟 bootstrap 中的栅格化系统一模一样了。
了解完相关的定义后，我们来深入理解一下bootstrap栅格系统吧。
bootstarp的栅格系统将一行等分为12列宽度相等的格子
以下的介绍均基于bootstrap提供的数据库，如想复制看到具体的效果需引入bootstrap数据库(包括了CSS 和 JS样式)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
下面代码中添加的 class - container可以忽略，只是起一个限制行宽度的大容器作用，不影响大局。
等宽多行
- 通过插入一个.w-100您希望列换行的位置来创建跨多行的等宽列
<div class="container">
<div class="row">
<div class="col">one</div>
<div class="col">two</div>
<div class="w-100"></div>
<div class="col">three</div>
<div class="col">four</div>
</div>
</div>
上面是对应的效果图，这里也涉及到列中断1的内容假如注释掉 class="w-100"这行的话排列的效果就会变成单行排布
设置一列的宽度
- 设置一列宽度遵循一定的原则，我们所知道的bootstrap将一行等分为12列，所以我们在设置的时候，必须保证列的比例最终加起来等于12。
- 我们可以通过计算得到每一份比例，如下：
.col-1 {width: 8.33%} .col-2 {width: 16.66%} .col-3 {width: 25%} .col-4 {width: 33.33%} .col-5 {width: 41.66%} .col-6 {width: 50%} .col-7 {width: 58.33%} .col-8 {width: 66.66%} .col-9 {width: 75%} .col-10 {width: 83.33%} .col-11 {width: 91.66%} .col-12 {width: 100%}
（相对父级元素而言）
<div class="container">
<div class="row">
<div class="col-2">
small_one
</div>
<div class="col-6">
wide_one
</div>
<div class="col">
small_one
</div>
</div>
</div>
代码效果的呈现如上，第一块占了16.66%， 第二块占了50%，第三块占了 33.33%，虽然第三块的设置并没有标明他是'col-4'但是按照计算的原则，w3 = 12 - w1 - w2，即12 - 2 -6 =4比例的话都是相对于父级元素的，这个与前面的继承有关系。
间接改变列宽的方法还有使用响应式.row-cols-x类来快速设置最能呈现内容和布局的列数，它可以确定一行可以排布的列数.。
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
row - cols - x，我们可以给 x 一个整数值，比如代码中的2，意思就是一行排布的列数为两行，所以每个 div 设置的宽度为 50%
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">混合嵌套<div>
当出现这种混合嵌套的情况下，需要看屏幕的尺寸来确定执行的代码块。有关屏幕尺寸的内容下面会有详细的介绍，如果对此有疑惑的话可以先放放。
设宽时注意事项
如果在一行中放置超过12列，则每组额外的列将作为一个单元包装到新行上
<div class="container">
<div class="row">
<div class="col-9">one_tube</div>
<div class="col-2">two_tube</div>
<div class="col-6">three_tube</div>
</div>
</div>
可变宽度内容
- 使用col-{breakpoint}-auto类可根据其内容的自然宽度来调整列的大小。
在使用 auto类之前，我们首先来了解一下以下代码块的含义。
<div class = "col-lg-2 col-md-4 col-sm-6 col-xs-12">不同屏幕之间的转换</div>
- 根据我们网格选项2的内容, 你想让他们在不同屏幕大小的时候有不同的展示方式，可以采用混合应用的方法。
col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 每个div所占列数。比如’col-lg-2’的意思是在屏幕尺寸大于1200px时单个 div 所占列数为2列。- 对上面代码的解读：
当屏幕尺寸大于1200px 的时候，用 col-lg-2 类对应的样式；在 992px 到 1200px 之间的时候，用 col-md-4 类对应的样式；在 768px 到 992px 之间的时候，用 col-sm-6 类对应的样式；小于 768px 的时候，用 col-xs-12 类对应的样式
<div class="container">
<div class="row">
<div class="col">
the first one
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-md-2">
the third one
</div>
</div>
</div>
’ col - md - auto’的意思其实是在屏幕尺寸在 992px 到 1200px 之间的时候，根据内容的宽度来确定需要占有的列数（其实也就是占有父级宽度的百分比）。
对准
- 对准分为水平对齐与垂直对齐。
- 水平对齐（该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐）
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
left
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
center
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
right
</div>
</div>
</div>
start, center, end分别代表居左，居中，居右三个属性
<div class="container">
<div class="row justify-content-around">
<div class="col-4">
one_con
</div>
<div class="col-4">
two_con
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
one_con
</div>
<div class="col-4">
two_con
</div>
</div>
</div>
- around属性左右两边都留有一定相等的空间（假如只有一个元素的话会居中），然后各块级元素在行中以一定间距依次排布。
- between属性规定第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐。然后剩余的弹性项分布在该行上，相邻项目的间隔相等。（当只有一个元素的时候，则默认居左排列）
- 垂直对齐
<div class="container">
<div class="row">
<div class="col align-self-start">
One
</div>
<div class="col align-self-center">
Two
</div>
<div class="col align-self-end">
Three
</div>
</div>
</div>
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
- 左右对齐的另一种方法( ml-auto/ mr-auto)
- ml-auto 实现 块元素向右对齐
- mr-auto 实现 块元素想左对齐
<div class="row">
<div class="col-md-4 ml-auto">向右对齐</div>
</div>
向左对齐的代码实现同理
合并两行（前提是两个适应屏幕宽度的宽度之和为12）
- no - gutters属性可以使用
删除预定义网格类别中列之间的装订线(其实就是打破块级元素独占一行的属性，实现两行元素的合并) - 我的屏幕是Medium型，如果看不到效果的话可能是屏幕尺寸的差异，可适当调整一下宽度
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">1号</div>
<div class="col-6 col-md-4">2号</div>
</div>
排序
<div class="container">
<div class="row">
<div class="col order-last">
The first
</div>
<div class="col">
center
</div>
<div class="col order-first">
The last
</div>
</div>
</div>
偏移
- 偏移采用的是 .offset-x 网格类，它使元素向右移动 x 个列向量。
<div class="container">
<div class="row">
<div class="col-md-4">初始的位置</div>
<div class="col-md-4 offset-md-4">移动后的位置</div>
</div>
</div>
套料
- 大家可能会想，什么是套料？其实套料是将内容与默认网格嵌套，也就是在原有的网格中嵌入新的表格。（原则：嵌套行应包括一组总计不超过12个或更少的列）
<div class="container">
<div class="row" style="background-color: gray; height: 300px;">
<div class="col-sm-9">
第一个网格
<div class="row" style="background-color: orange;">
<div class="col-8 col-sm-6">
第二个网格
</div>
<div class="col-4 col-sm-6">
第二个网格
</div>
</div>
</div>
</div>
</div>
8654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
