Bootstrap学习记录-2.container和table

1. Container

Bootstrap中容器类提供了2个类标识：

container

、

container-fluid

。
两者的区别在于：

container

：容器不止有15px的

padding

，还有一个随着浏览器宽度变化而变化的

margin

。

container-fluid

：只有固定的15px的

padding

。
因此，

container

类的自适应是通过修改

margin

的改变来完成的，而

container-fluid

类的百分百宽度是指在固定的15px的

padding

前提下宽度总是当前视窗的宽度。

2. Table

Bootstrap中表格的标识符包括：

table

、

thead

、

tbody

、

tr

、

th

、

td

。
其中，

table

表示表格主体，

thead

表示表头，

tbody

表示表体，

tr

表示表格的一行，

th

表示表头单元格，

td

表示标准单元格。

• table

  元素需要使用

  .table

  类进行装饰。

• .table-striped

  类用来表示表体的行的斑马色。

• .table-bordered

  类用来显示表格及单元格的边框。

• .table-hover

  类用来设置表体的行在鼠标停留时的突出显示状态。

• .table-sm

  类表示将单个元的

  padding

  减少一半，使得表格更紧凑。

• .table-responsive

  类表示表格内容超出显示时，将显示水平滚动条。

• .table-*

  类能够改变背景色，能够应用在

  table

  、

  tr

  和

  td

  元素上，比如，

  .table-dark

  表示黑色。

• .thead-*

  类能够改变表头背景色，比如，

  .thead-dark

  表示黑色。

• caption

  元素用来帮助使用屏幕阅读器的用户快速识别表格，并理解表格意思，类似于对表格内容的说明。
  一个表格的基本构成为

<table>
<caption></caption>
<thead>
<tr>
<th>序号</th>
<th></th>
...
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td></td>
...
<tr>
</tbody>
</table>