Bootstrap学习笔记系列2-------Bootstrap简单表格处理

标签

• <table> 为表格添加基础样式
• <thead> 表格标题行的容器元素，用来识别列
• <tbody> 表格主提中的表格行的容器元素
• <tr> 单行的容器元素，用来存放
• <th> 在 中使用，用来存放列名单元格
• <td> 表数据单元格
• <caption> 关于表格存储内容的描述或者总结

应用于表格样式的类（全部都是在
中添加）

• .table 为表格添加基本的样式（只有横向的分隔线）
• .table-striped 形成斑马纹
• .table-bordered 为所有的单元格添加边框
• .table-hover 在<tbody>内鼠标悬停会赋予该行不同的颜色
• .table-condensed 让表格变得更紧凑

<tr>,<th>和<td>类样式

• .active 将表示悬停的颜色用在目标的行或者单元格上
• .success 表示成功的操作（绿色）
• .info 表示信息变化的操作（蓝色）
• .warning 表示一个警告的操作（黄色）
• .danger表示一个危险的操作（红色）

响应式表格

通过把任意的.table包括在.table-responsive内，就可以通过水平滚动条来兼容小型的设备(小于768px),在其他类型的设备上看则不会有区别。

<div class= "table-responsive ">
      <table class="table">
            ...
      </table>
</div>