## 基本实例 为任意 `<table>` 标签添加 `.table` 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。 Optional table caption. | # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry | the Bird | @twitter | ~~~html <table class="table"> ... </table> ~~~ ## 条纹状表格 通过`.table-striped`类可以给`<tbody>`之内的每一行增加斑马条纹样式。 #### 跨浏览器兼容性 条纹状表格是依赖`:nth-child`CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。 | # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry | the Bird | @twitter | ~~~html <table class="table table-striped"> ... </table> ~~~ ## 带边框的表格 添加`.table-bordered`类为表格和其中的每个单元格增加边框。 | # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry | the Bird | @twitter | ~~~html <table class="table table-bordered"> ... </table> ~~~ ## ## 鼠标悬停 通过添加`.table-hover`类可以让`<tbody>`中的每一行对鼠标悬停状态作出响应。 | # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry | the Bird | @twitter | ~~~html <table class="table table-hover"> ... </table> ~~~ ## 紧缩表格 通过添加`.table-condensed`类可以让表格更加紧凑，单元格中的内补（padding）均会减半。 | # | First Name | Last Name | Username | | --- | --- | --- | --- | | 1 | Mark | Otto | @mdo | | 2 | Jacob | Thornton | @fat | | 3 | Larry the Bird | @twitter | ~~~html <table class="table table-condensed"> ... </table> ~~~