栅格系统#
下面这张图是Bootstrap对栅格系统有关系数的规定
什么是栅格体统?#
栅格系统是Bootstrap提供的移动优先的网格系统, 各个分界点如上: 576px 720px 992px 1200px
一行最多盛放12列, 从上图中也能看出一共是5种响应尺寸(分别对应不同的尺寸的屏幕)
其实大白话讲 : 就是当我们用鼠标拖动浏览器左右移动时, 浏览器的可视区域就会随之放大和缩小, 这时浏览器可视区域就会在Bootstrap规定的分界点中移动, 这时Bootstrap会捕获当前浏览器可视区域的大小, 然后加持上不同的显示效果
比如: html如下
<div class="container-fluid"> <!--.row限制一行--> <div class="row"> <div class="col-xl-3 col-lg-6" style="background: #ff6262">炽焰</div> <div class="col-xl-3 col-lg-6" style="background: #5b9df9">冰蓝</div> <div class="col-xl-3 col-lg-6" style="background: #2c7d59">青草</div> <div class="col-xl-3 col-lg-6" style="background: #8E2DE2">江户</div> </div> </div>
- class=row 表示一行
- class=col 表示一个单元格
col 放置在 row下面
效果图
解释一下: class=col-xl-3 时, 对应着上图中的 Extra Large 翻译成人话就是: 当浏览器可视区域的大小, 大于1200px时就按照 class = col-xl-3 布局, 上面我把浏览器的可视区域调整到1201px, 所以我就说, 我的浏览器的可视域在Extra Large 区间里面, 那么.col-xl 就会生效 ; **那具体怎么生效呢? ** Bootstrap规定每行12列, 上面四个div , ,每个都有class = col-xl-3 也就是3*4整好等于12 , 因此整好平铺开
缩小一点呢?
我把浏览器的可视区域调整到 1198px , 现在小于了1200px, 但是 1198px 大于992px , 所以我就说, 当前状态落在了 Large 区间, 于是 .col-lg生效, 上面我们配置是 col-lg-6 经过计算每个两个div可以占满一行, 多余的被挤到下一行
比992px再小呢?
其实类比这 col-xl 看就行, 用大白话将就是说, 当浏览器的可视区域大于1200px时, 按照 col-xl 布局, 如果比1200px小了, 却大于992px, 就按照比较小的 col-lg 布局, 如果比992px还小了, 类退就按照更小的col-md 布局, 如果我们没写的话, 就按照最小的布局, 此时, 单个col 会占满一行, 各个col会相互往下挤
确实会存在往下挤的情况, 不信你看
<div class="container-fluid"> <!--.row限制一行--> <div class="row"> <div class="col-xl-3 col-lg-8" style="background: #ff6262">炽焰</div> <div class="col-xl-3 col-lg-6" style="background: #5b9df9">冰蓝</div> <div class="col-xl-3 col-lg-6" style="background: #2c7d59">青草</div> <div class="col-xl-3 col-lg-6" style="background: #8E2DE2">江户</div> </div> </div>
效果:
如果不写 中间的sm md lg 或者xl呢?
<div class="container-fluid"> <!--.row限制一行--> <div class="row"> <div class="col-3 " style="background: #ff6262">炽焰</div> <div class="col-3 " style="background: #5b9df9">冰蓝</div> <div class="col-3 " style="background: #2c7d59">青草</div> <div class="col-3 " style="background: #2c7d59">青草</div> </div> </div>
效果就像下面这样, 既然不限制任何分界点, 那么无论浏览器的可视区间多大, 始终占4个格 , 当然每行最多仍然是12, 多出来的依然会被挤下去
等宽布局 col#
<div class="container-fluid"> <!--.row限制一行--> <div class="row"> <div class="col" style="background: #ff6262">炽焰</div> <div class="col" style="background: #5b9df9">冰蓝</div> <div class="col" style="background: #2c7d59">青草</div> <div class="col" style="background: #8E2DE2">江户</div> <div class="col" style="background: #2c7d59">青草</div> </div> </div>
就像上面代码这样, 每行class=col 可实现等宽布局, 怎么个等宽法呢? 其实还是12列, 只不过是所有的 col 平分12列, 看看下面的效果图, 自然就明白了 , 而且此时无论多少个col , 全部等宽分布在一个row里面
单独设置一列的宽度: col-6#
<div class="container-fluid"> <!--.row限制一行--> <div class="row"> <div class="col" style="background: #ff6262">炽焰</div> <div class="col-6" style="background: #5b9df9">冰蓝</div> <div class="col" style="background: #2c7d59">青草</div> <div class="col" style="background: #8E2DE2">江户</div> </div> </div>
效果图
设置可变宽度:col-auto#
<div class="container-fluid"> <!--.row限制一行--> <div class="row"> <div class="col" style="background: #ff6262">炽焰</div> <div class="col-auto" style="background: #5b9df9">冰蓝</div> <div class="col" style="background: #2c7d59">青草</div> <div class="col" style="background: #8E2DE2">江户</div> </div> </div>
可变宽度就是说, 这个单元格里面的内容多大, 它就多大, 就像下面这样
可变宽度+断点#
<div class="container-fluid"> <!--.row限制一行--> <div class="row"> <div class="col" style="background: #ff6262">炽焰</div> <div class="col-xl-auto" style="background: #5b9df9">冰蓝</div> <div class="col" style="background: #2c7d59">青草</div> <div class="col" style="background: #8E2DE2">江户</div> </div> </div>
css样式如下可以对比下面的方便理解:
class = col-xl-auto # 相当于下面的累加 class = col # 等宽布局 class = col-xl # 当浏览器的可视区域大于1200px时生效 class = col-auto # 可变宽度
用白话解析一下, 就是说, 当浏览器的可视区域大于1200px时, class=col-xl-auto就会生效, 此时的效果就像下面这样, 冰蓝处于可变长度大小
但是, 当我的浏览器的可视区域的长度小于 1200px时, 就会像下面这样: 用大白话解释下: 当我浏览器的可视区域小于1200px时, class=col-xl-auto 就会失效, 其实并不是真的失效了, 而是按照比它小的那个分界区间重新划分布局, 可以看上面的第一个图, 比如sm lg 都比他小, 但是我没有添加这些属性 , 于是它就按照最小的 样式来布局, 于是让冰蓝占满一行, 然后赤焰就被挤下去了, 下面的青草和江户两者都是 class=col , 平分12个格
**垂直对齐: **#
对齐: 在row上添加 align-items-start / center / end
<!--.row限制一行--> <div class="row align-items-start" style="border:3px solid;height: 100px"> <div class="col" style="background: #ff6262">炽焰</div> <div class="col" style="background: #5b9df9">冰蓝</div> <div class="col" style="background: #2c7d59">青草</div> <div class="col" style="background: #8E2DE2">江户</div> </div>
顶部对齐: align-items-start
居中对齐: align-items-center
同理 底部对齐应该能想出来了
**同样可以添加上断点: **
如下的实例: align-items-xl-center 添加上了xl断点,
<div class="container-fluid"> <!--.row限制一行--> <div class="row align-items-xl-center" style="border:3px solid;height: 100px"> <div class="col" style="background: #ff6262">炽焰</div> <div class="col" style="background: #5b9df9">冰蓝</div> <div class="col" style="background: #2c7d59">青草</div> <div class="col" style="background: #8E2DE2">江户</div> </div> </div>
用大白话讲一下就是说, 当我的浏览器的可视界面大于1200px时, row中的四个div会居中对齐
**如果我的浏览器的可是界面长度小于1200px了, 那么 class=align-items-xl-center 也就失效了, 于是 row里面的四个div按照自己默认的样式进行布局如下: **
**给某个col 单独添加对齐的样式: **
<div class="container-fluid"> <!--.row限制一行--> <div class="row align-items-xl-center" style="border:3px solid;height: 100px"> <div class="col" style="background: #ff6262">炽焰</div> <div class="col align-self-end" style="background: #5b9df9">冰蓝</div> <div class="col" style="background: #2c7d59">青草</div> <div class="col" style="background: #8E2DE2">江户</div> </div> </div>
如上给第二列添加底部对齐的样式
