Bootstrap中table的用法

BOOTSTRAP中table的用法

1.table結構

<table >
    <caption>base table layout</caption>
    <thead>
        <tr >
            <th>NAME</th>
           
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>XIAOHONG</td>
         
        </tr>

    </tbody>

</table>

2. class in table

類

描述

.table

爲任意 添加基本樣式 (只有橫向分隔線)

.table-striped

在 tbody 內添加斑馬線形式的條紋 ( IE8 不支持)

.table-bordered

爲所有表格的單元格添加邊框

.table-hover

在 tbody 內的任一行啓用鼠標懸停狀態

.table-condensed

讓表格更加緊湊

.table

<table class="table" >
    <caption>base table layout</caption>
    <thead>
  	 ...    
    </thead>
    <tbody>
       ...
    </tbody>

</table>

.table-striped

<table class="table table-striped" >
    <caption>base table layout</caption>
    <thead>
  	 ...    
    </thead>
    <tbody>
       ...
    </tbody>

</table>

3. class in tr td th

類	描述
.active	將懸停的顏色應用在行或者單元格上
.success	表示成功的操作
.info	表示信息變化的操作
.warning	表示一個警告的操作
.danger	表示一個危險的操作

<table class="table table-hover" >
    <caption>base table layout</caption>
    <thead>
        <tr class="active">
            <th>NAME</th>
            <th>AGE</th>
            <th>GENDER</th>
        </tr>
    </thead>
    <tbody>
        <tr class="info">
            <td>XIAOHONG</td>
            <td>14</td>
            <td>MALE</td>
        </tr>

        <tr class="warning">
            <td >JHON</td>
            <td>15</td>
            <td>FEMALE</td>
        </tr>

        <tr class="danger">
            <td>XIAOHONG</td>
            <td>14</td>
            <td>MALE</td>
        </tr>

        <tr >
            <td class="active">JHON</td>
            <td class="danger">15</td>
            <td class="success">FEMALE</td>
        </tr>
    </tbody>

</table>