`

Bootstrap--表格

 
阅读更多
支持<table>标签、<thead>标签、<tbody> 标签、<tr>标签、<td>标签、<th>标签、<caption>标签。

<table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr  class="success">
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr class="warning">
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>



.table
很少的内补(padding)并只增加水平分隔线。

.table-striped
封装了:nth-child CSS选择器 (IE7-8不支持)为表格中的行添加斑马纹样式,隔行变色。

.table-bordered
为表格增加边框(border)和圆角(rounded corner)。

.table-hover
为 <tbody> 中的每一行赋予鼠标悬停样式。

.table-condensed
每个单元格的内补(padding)减半可使表格更紧凑。

行属性选择情景(contextual)类为表格添加颜色。
.success 表示成功或积极的行为。
.error   表示一个危险或存有潜在危险的行为。
.warning 表示警告,可能需要注意。
.info    作为一个默认样式的一个替代样式。
http://v2.bootcss.com/base-css.html#tables
  • 大小: 40 KB
  • 大小: 61.7 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics