摘要：
早就想撰文写一篇关于bootstrap的文章。因为在我看来。bootstrap作为一种早期且实用满满的weib前端框架。其所包含的功能十分丰富且强大。今天就给大家分享一下怎么利用b... 早就想撰文写一篇关于bootstrap的文章。因为在我看来。bootstrap作为一种早期且实用满满的weib前端框架。其所包含的功能十分丰富且强大。今天就给大家分享一下怎么利用bottstrap做一个excel的表格。且听我一一道来。
html表格的基本结构
html<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr></table>
bootstrap中通过相应的样式对表格进行美化：
.table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
html<table class="table"></table>
.table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
html<table class="table table-striped"></table>
.table-bordered 类为表格和其中的每个单元格增加边框。
html<table class="table table-bordered"></table>
.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
html<table class="table table-hover"></table>
.table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
html<table class="table table-condensed"></table>
bootstrap对table标签中的 tr td 的样式设置：
.success 类鼠标悬停在行或单元格上时所设置的颜色。
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
html<!--设置一行的状态颜色--><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类：
html<div class="table-responsive"> <table class="table"> </table></div>
