四、栅格布局
- 栅格系统是用于页面布局,属于Bootstrap的核心
- 可以在不同终端显示不同效果(响应式)
- 栅格,具有行row、列col的概念,网格列是通过跨越指定的 12 个列来创建。
1.栅格布局的列
- 一行平均分为12个列
- `.col-1~12`代表列占有行的十二分之几份
2.栅格布局的响应式
- `.col-sm-*` 小屏幕
- `.col-md-*` 中屏幕
- `.col-lg-*` 大屏幕
- `.col-xl-*` 超大屏幕
3.栅格布局的偏移值
- 偏移列元素在自己的原位置像右偏移几份,偏移超出一行,列会换行
- 偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl,表示屏幕设备类型,第二个星号( * )可以是 1 到 11 的数字。例如:.offset-md-4 是把.col-md-4 往右移了四列格。
4.嵌套布局
嵌套布局示意图,因为栅格布局有局限,他的底层还是弹性布局,复杂的嵌套关系可以尝试混搭使用
5.栅格布局的项目排列方式
(1)水平轴
- `.justify-content-start`开始位置对齐(如果横向居左)
- `.justify-content-center`居中对齐(如果横向居中)
- `.justify-content-end`结束位置对齐(如果横向居右)
- `.justify-content-around`有缝隙的对齐
- `.justify-content-between`左右两端对齐
(2)垂直轴
- `.align-items-start`开始位置对齐(如果横向居顶)
- `.align-items-center`居中对齐
- `.align-items-start`结束位置对齐(如果横向居底)
五、表格
- `.table` 是table标签的一个基类(基本样式)写在table标签中
- `.table-bordered` table的边框,有设置好的的样式,写在table标签中
- `.table-primary` table的颜色,写在table标签中
- `.table-responsive-*`table的小尺寸,可以写响应式sm,md,lg,xl
- `.table-striped` 条形纹,相当于隔行变色效果,写在table标签中
- `.table-hover` 鼠标悬停效果,写在table标签中
- `.thead-light` 或`.thead-dark` 就能使 `<thead>`区显示出浅黑或深灰,写在thead中