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>