欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Bootstrap中table的用法

程序员文章站 2024-02-17 14:16:28
...

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>

Bootstrap中table的用法

.table-striped

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

</table>

Bootstrap中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>

Bootstrap中table的用法