## 表格
**基本實例**
給任意 \<table\> 標簽添加類 .table 可以給表格添加基本的樣式 — 少量的內補(padding)和水平方向的分隔線。
實例:
```html
<table class="table">
<tr>
<th>#</th>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
<tr>
<td>1</td>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>2</td>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</table>
```

*****
**條紋狀表格**
通過`.table-striped`類可以給`<tbody>`之內的每一行增加斑馬條紋樣式,也就是隔行變色。
實例:
```html
<table class="table table-striped">
<tr>
<th>#</th>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
<tr>
<td>1</td>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>2</td>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</table>
```

*****
**帶邊框的表格**
添加`.table-bordered`類為表格和其中的每個單元格增加邊框。
實例:
```html
<table class="table table-striped table-bordered">
<tr>
<th>#</th>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
<tr>
<td>1</td>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>2</td>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</table>
```

*****
**鼠標懸停**
通過添加`.table-hover`類可以讓`<tbody>`中的每一行對鼠標懸停狀態作出響應。
實例:
```html
<table class="table table-bordered table-hover">
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</table>
```

鼠標移入當前行會改變當前行的背景色。
*****
**緊縮表格**
通過添加`.table-condensed`類可以讓表格更加緊湊,單元格中的內補(padding)均會減半。
實例:
```html
<table class="table table-bordered table-condensed">
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</table>
```

*****
**狀態類**
通過這些狀態類可以為行或單元格設置顏色。
| class | 描述 |
| --- | --- |
| `.active` | 鼠標懸停在行或單元格上時所設置的顏色 |
| `.success` | 標識成功或積極的動作 |
| `.info` | 標識普通的提示信息或動作 |
| `.warning` | 標識警告或需要用戶注意 |
| `.danger` | 標識危險或潛在的帶來負面影響的動作|
實例:
```html
<table class="table table-bordered table-condensed">
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
<tr class="active">
<th>1</th>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr class="success">
<th>2</th>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr class="info">
<th>3</th>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr class="warning">
<th>4</th>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr class="danger">
<th>5</th>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</table>
```

通過為表格中的一行或一個單元格添加顏色,給瀏覽網頁的用戶提供不同類型的信息
*****
**響應式表格**
將任何`.table`元素包裹在`.table-responsive`元素內,即可創建響應式表格,其會在小屏幕設備上(小于768px)水平滾動。當屏幕大于 768px 寬度時,水平滾動條消失。注意:列數必須大于等于6列才有效果。
實例:
```html
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-condensed">
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
<tr class="active">
<th>1</th>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr class="success">
<th>2</th>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr class="info">
<th>3</th>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr class="warning">
<th>4</th>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr class="danger">
<th>5</th>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</table>
</div>
</div>
```

- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應式工具
- 第三章 . bootstrap相關CSS應用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導航
- 7、導航條
- 8、路徑導航
- 9、分頁
- 10、標簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態框 (modal.js)
- 4、下拉菜單 (dropdown.js)
- 5、滾動監聽 (scrollspy.js)
- 6、可切換標簽 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、彈出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按鈕 (button.js)
- 11、折疊插件(collapse.js)
- 12、輪播插件(carousel.js)
- 13、Affix插件(affix.js)