Bootstrap4.x学习笔记【二】
布局系统
一、布局介绍
1. 对于容器布局，Bootstrap4.x 提供了.container 和.container-fluid 两种；
2. 这两种样式是启用布局栅格系统最基本的要素；
3. .contianer 是固体自适应方式，.container-fluid 是流体 100%自适应方式；
4. 容器布局可以嵌套，但一般来说，不推荐且很少使用到：
5. 自适应对应的响应式方式如下 media：
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
6. 从响应式的 media 可以看出，Bootstrap4 是以移动端为优先的。
二、栅格系统
栅格系统有点像田字格本子，大小整齐划一。
1. Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统；
2. 基于 12 列的布局、5 种响应尺寸（面向不同屏幕设备）；
3. 完全使用 flexbox 流式布局构建的，完全支持响应式标准；
4. 具体采用 div 容器的行、列和对齐内容来构建响应式布局；
三、栅格系统展示
布局系统 第一列第二列第三列
第一列第二列第三列
第一列第二列第三列
第一列第二列
四、栅格等级
栅格系统中有五个栅格等级，具体如下表：
|
超小屏幕 <576px |
小屏幕 >=576px |
中等屏幕 >=768px |
大屏幕 >=992px |
超大屏幕 >=1200px |
|
| 前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 列数 | 12列 | ||||
如果同时是使用两个或以上的级别，并且比例相同，则遵循移动端优先的原则；
使用.w-100 可以切割栅格栏位，进行分行操作；
第一列第二列第三列第四列
如果强制设置了 col-3 数值，那切割后，将不会自动填充；
第一列第二列第三列