Bootstrap学习2：bootstrap中的布局

四、栅格布局

- 栅格系统是用于页面布局，属于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中