表格 - Tables

常规表格

给 <table> 标签设置 .table 类

<table class="table">

    <!-- 表头 -->
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>

</table>

01.PNG

条纹表格

增加设置 table-striped 类

<div class="table table-striped"> 
        .........
</div>

02.PNG

带边框表格

增加设置 table-bordered 类

<div class="table table-bordered"> 
        .........
</div>

03.PNG

鼠标悬停表格

设置 table-hover 类

<div class="table table-hover"> 
        .........
</div>

twitter-bootstrap-table-hover.png

紧凑型表格

设置 table-condensed 类

<div class="table table-condensed"> 
        .........
</div>

05.PNG

为行设置情景颜色

在 <tr> 标签中设置 .success .info 之类的类

<table class="table">
    <thead>
        <tr>
            <th>Row</th>
            <th>Bill</th>
            <th>Payment Date</th>
            <th>Payment Status</th>
        </tr>
    </thead>

    <tbody>

        <tr class="active">
            ......
        </tr>

        <tr class="success">
            ......
        </tr>

        <tr class="info">
            ......
        </tr>

        <tr class="warning">
            ......
        </tr>

        <tr class="danger">
            ......
        </tr>
    </tbody>
</table>

06.PNG

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格。在屏幕尺寸不够的情况下，响应式表格会自动增加水平滚动条

<div class="table-responsive"> 
    <table class="table table-bordered">
        .........
    </table>
</div>

07.PNG