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>