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>