html表格的基本结构
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
bootstrap中通过相应的样式对表格进行美化:
.table
类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。
<table class="table"> </table>
.table-striped
类可以给 <tbody>
之内的每一行增加斑马条纹样式。
<table class="table table-striped"> </table>
.table-bordered
类为表格和其中的每个单元格增加边框。
<table class="table table-bordered"> </table>
.table-hover
类可以让 <tbody>
中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover"> </table>
.table-condensed
类可以让表格更加紧凑,单元格中的内补(padding)均会减半。
<table class="table table-condensed"> </table>
bootstrap对table标签中的 tr td
的样式设置:
.success
类鼠标悬停在行或单元格上时所设置的颜色。
.success
标识成功或积极的动作
.info
标识普通的提示信息或动作
.warning
标识警告或需要用户注意
.danger
标识危险或潜在的带来负面影响的动作
<!--设置一行的状态颜色--> <tr class="active"></tr> <tr class="success"></tr> <tr class="warning"></tr> <tr class="danger"></tr> <tr class="info"></tr> <!--设置一行中的某列的状态颜色--> <tr> <td class="active"></td> <td class="success"></td> <td class="warning"></td> <td class="danger"></td> <td class="info"></td> </tr>
响应式表格的设置,在table表格外包裹一层div,并设置.table-responsive
类:
<div class="table-responsive"> <table class="table"> </table> </div>