bootstrap_table_class表格样式实例

<div class="container">
    <h2>表格</h2>
    <!--table标签级别的样式说明如下：
    ----.table 为任意表格添加基本样式 (只有横向分隔线)
    ----.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
    ----.table-bordered 为所有表格的单元格添加边框
    ----.table-hover 指针悬停在行上时会出现浅灰色背景
    ----.table-condensed 让表格更加紧凑
    -->
    <table class="table table-striped table-bordered table-hover table-condensed">
        <!--table标签下的字标签说明如下：
        ----<thead> 用来标识表格的主题，即首行各列的标题
        ----<tbody> 用来标识表格的主体部分，即首行各列标题下的数据
        ----<caption> 关于表格存储内容的描述或总结
        ----<tr> 行
        ----<td> 列
        ----<th> 列，字体会加粗
        -->
       <caption>该表格用于展示姓名列表<caption>
       <thead>
           <!--tr、th、td标签级别的样式说明如下：
           ----.active 对某一特定的行或单元格应用悬停颜色
           ----.success 表示一个成功的或积极的动作的颜色
           ----.warning 表示一个需要注意的警告的颜色
           ----.danger 表示一个危险的或潜在的负面动作的颜色
           -->
           <tr class="active">
               <th>序号</th>
               <th>姓名</th>
           </tr>
       </thead>
       <tbody >
           <tr>
               <td class="success " >1</td>
               <td class="warning ">炭烧小鸡</td>
           </tr>
           <tr class="danger ">
               <td>2</td>
               <td>躲在树下的猫</td>
           </tr>
           <tr>
               <td>3</td>
               <td>水牛</td>
           </tr>
       </tbody>
    </table>
</div>