一、大小尺寸
bootstrap4的栅格系数
与bootstrap3相比多了一个576px的断点,其表示为.col-
bootstrap3的栅格系数
下面为了简写我就用b4代表bootstrap4了
二、容器
b4的容器与b3的容器差别不大,唯一有差别的是b4的固定容器(container)可以增加断点,如.container-{breakpoint},其含义就是不同的断点就对应着不同的媒体查询
如图:
三、原理
Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容,不同于旧版3.0,新版是完全基于flexbox流式布局构建的,完全支持响应式标准
四、列的布局方式
列的平均分(col、col-sm、col-md、col-lg、col-xl)
<div class="container"> /*固定容器*/
<div class="row">
<div class="col-lg"> /*在lg模式下平均分成3份,col、col-sm、col-md、col-xl也是相同的意思*/
三分之一空间占位
</div>
<div class="col-lg">
三分之一空间占位
</div>
<div class="col-lg">
三分之一空间占位
</div>
</div>
</div>
结果图:
但是当使用col、col-sm、col-md、col-lg、col-xl的时候列数就不一定是12列了,如:(这里就不写代码了)
当然还有另一个例子
<div class="container">
<div class="row">
<div class="col"> /*剩余平均分*/
1 of 3
</div>
<div class="col-6"> /*在col-模式下占据6列*/
2 of 3 (更宽-12格中占6格,其它6格另外两列平分)
</div>
<div class="col"> /*剩余平均分*/
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5"> /*奇偶不影响*/
2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
结果图:
col-{breakpoint}-auto
使用 col-{breakpoint}-auto ,可以实现根据其内容的自然宽度来对目标列进行大小调整。.
<div class="container">
<div class="row">
<div class="col"> /*剩余的列数平均分*/
1 of 3
</div>
<div class="col-md-auto"> /*该列的大小为内容的宽度*/
可变宽度内容自由伸张,左右宽度不变。
</div>
<div class="col"> /*剩余的列数平均分*/
3 of 3
</div>
</div>
</div>
结果图:
五、行的布局方式
行的分割(w-100类)
这里利用的是w-100类,意思是width:100%,强制把一行分成了两行
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div> /*使用w-100类进行强制分割*/
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
当然推荐使用row来分隔行,因为利于阅读
.row-cols-*
使用 .row-cols-* 类能够定义一个row空间中可放的列数,并支持不同的断点如.row-cols-md-4, .row-cols-3,注意需要要写在 .row空间之中
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<div class="row row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
结果图:
六、对齐
因为b4是基于flexbox流式布局构建的,所以有类似于flex里面的justify-content、align-items、align-self
align-items-start、align-items-center、align-items-end(针对容器内的目标行)
<div class="container">
<div class="row align-items-start"> /*上*/
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center"> /*中*/
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end"> /*下*/
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
结果图:
align-self-start、align-self-center、align-self-end(针对特定行内的目标列)
<div class="container">
<div class="row">
<div class="col align-self-start"> /*上*/
One of three columns
</div>
<div class="col align-self-center"> /*中*/
One of three columns
</div>
<div class="col align-self-end"> /*下*/
One of three columns
</div>
</div>
</div>
结果图:
justify-content-start、justify-content-center、justify-content-end、justify-content-around、justify-content-between(针对容器内的特定列)
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
结果图:
七、沟槽的清除
在行内使用no-gutters类即可
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
结果图:
八、重排序
使用 .order-* 选择符,可以对DIV空间进行 可视化排序,系统提供了.order-1到.order-12的12个级别的顺序,也有.order-first来快速更改一个顺序到最前面,但如果没有定义顺序则按照原来的顺序(类似与b3内的.col-md-push- 和 .col-md-pull-*)*
<div class="container">
<div class="row">
<div class="col">
1号空间-未定义序号,位置不变。
</div>
<div class="col order-12">
2号空间-排最后。
</div>
<div class="col order-1">
3号空间-放第1但受1号空间不变影响居第2位。
</div>
<div class="col order-first">
4号空间-优先排序,占第1位。
</div>
</div>
</div>
结果图:
九、列偏移
使用响应式的.offset-*栅格偏移方法,也可以增加断点(与b3的.col-md-offset-*类似)
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
结果图:
十、Margin移动布局
在b4内可以使用.ml-auto与.mr-auto来强制隔离两边的距离,实现类水平隔离的效果。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
结果图:
(上面内容是根据个人理解与官网的资料整理而成的)
其他内容也可以参考这里
本文只用与个人学习与记录