css3如何做到bootstrap表格推荐

摘要： 早就想撰文写一篇关于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>