初学 Bootstrap 表格

一.基本款

在 <table> 标签添加 .table 类就可以给表格添加基本的样式.

<table class="table">
    <thead><tr><th>编号</th><th>商品</th><th>数量</th></tr></thead>
    <tbody>
        <tr><td>1</td><td>苹果</td><td>3</td></tr>
        <tr><td>2</td><td>西瓜</td><td>5</td></tr>
    </tbody>
    <tfoot><tr><td colspan="2">合计</td><td>8</td></tr></tfoot>
</table>

file
file
在上面两张图中,注意两点,第一,表格是充满了整个网页的;第二,随着网页宽度变大,表格会自适应的变大.

二.条纹表格

通过添加 .table-striped 类可以使 <tbody> 中的行隔行变色.

<table class="table table-striped">
    <thead><tr><th>编号</th><th>商品</th><th>数量</th></tr></thead>
    <tbody>
        <tr><td>1</td><td>苹果</td><td>3</td></tr>
        <tr><td>2</td><td>西瓜</td><td>5</td></tr>
        <tr><td>3</td><td>香蕉</td><td>1</td></tr>
        <tr><td>4</td><td>西柚</td><td>6</td></tr>
    </tbody>
    <tfoot><tr><td colspan="2">合计</td><td>15</td></tr></tfoot>
</table>

file

三.带边框的表格

添加 .table-bordered 类可以给表格和单元格添加边框,为了看到效果,我把表格放到一个容器中.

<div class="container">
    <table class="table table-striped table-bordered">
        <thead><tr><th>编号</th><th>商品</th><th>数量</th></tr></thead>
        <tbody>
            <tr><td>1</td><td>苹果</td><td>3</td></tr>
            <tr><td>2</td><td>西瓜</td><td>5</td></tr>
            <tr><td>3</td><td>香蕉</td><td>1</td></tr>
            <tr><td>4</td><td>西柚</td><td>6</td></tr>
        </tbody>
        <tfoot><tr><td colspan="2">合计</td><td>15</td></tr></tfoot>
    </table>
</div>

file

四.鼠标悬停变色

添加 .table-hover 类可以让 <tbody> 中的行实现鼠标悬停变色.

<div class="container">
    <table class="table table-striped table-bordered table-hover">
        <thead><tr><th>编号</th><th>商品</th><th>数量</th></tr></thead>
        <tbody>
            <tr><td>1</td><td>苹果</td><td>3</td></tr>
            <tr><td>2</td><td>西瓜</td><td>5</td></tr>
            <tr><td>3</td><td>香蕉</td><td>1</td></tr>
            <tr><td>4</td><td>西柚</td><td>6</td></tr>
        </tbody>
        <tfoot><tr><td colspan="2">合计</td><td>15</td></tr></tfoot>
    </table>
</div>

file
上图中,鼠标放在第二行上,所以第二行的颜色变得比较深.

五.紧凑型表格

<div class="container">
    <table class="table table-bordered">
        <thead> <tr><th>编号</th><th>商品</th><th>数量</th></tr></thead>
        <tbody>
            <tr><td>1</td><td>苹果</td><td>3</td></tr>
            <tr><td>2</td><td>西瓜</td><td>5</td></tr>
        </tbody>
        <tfoot> <tr><td colspan="2">合计</td><td>8</td></tr></tfoot>
    </table>
    <table class="table table-bordered table-condensed">
        <thead><tr><th>编号</th><th>商品</th><th>数量</th></tr></thead>
        <tbody>
            <tr><td>1</td><td>苹果</td><td>3</td></tr>
            <tr><td>2</td><td>西瓜</td><td>5</td></tr>
        </tbody>
        <tfoot><tr><td colspan="2">合计</td><td>8</td></tr></tfoot>
    </table>
</div>

file
在上图中,注意第二个表格的行高比较小;第一个表格中的 <th> 以及 <td> 标签的上下左右内边距都是8 px;第二个表格中的是5 px.

六.给表格添加状态类

.active 类可以使行或者单元格变成鼠标悬停时的颜色(#F5F5F5 灰色).
.success 类可以使行或者单元格变成"成功绿"(#E2EFDA).
.info 类可以使行或者单元格变成"信息蓝"(#DCECF6).
.warning 类可以使行或者单元格变成"警告黄"(#FBF8E5).

.danger 类可以使行或者单元格变成"危险红"(#EFDFDE).

<div class="container">
<table class="table table-bordered">
    <thead> <tr><th>编号</th><th>商品</th><th>数量</th></tr></thead>
    <tbody>
        <tr class="active"><td>1</td><td>苹果</td><td>3</td></tr>
        <tr class="success"><td>2</td><td>西瓜</td><td>5</td></tr>
        <tr class="info"><td>3</td><td>香蕉</td><td>1</td></tr>
        <tr class="warning"><td>4</td><td>西柚</td><td>6</td></tr>
        <tr class="danger"><td>5</td><td>芒果</td><td>2</td></tr>
    </tbody>
    <tfoot> <tr><td colspan="2">合计</td><td>17</td></tr></tfoot>
</table>

<table class="table table-bordered">
    <thead> <tr><th>编号</th><th>商品</th><th>数量</th></tr></thead>
    <tbody>
        <tr><td>1</td><td  class="success">苹果</td><td class="info">3</td></tr>
        <tr><td class="warning">2</td><td class="danger">西瓜</td><td class="active">5</td></tr>
    </tbody>
    <tfoot> <tr><td colspan="2">合计</td><td>8</td></tr></tfoot>
</table>
</div>

file