1.表格
table
thead tr th
tbody tr td
<table>
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>43</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>42</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>43</td>
</tr>
<tr>
<td>4</td>
<td>馬六</td>
<td>43</td>
</tr>
</tbody>
</table>
圖片.png
基本樣式<table class="table">，都要基于此樣式
圖片.png
1.1 條紋狀表格
<table class="table table-striped">凉泄，只對tbody有作用
圖片.png
1.2 帶邊框的表格
<table class="table table-bordered">
圖片.png
1.3 鼠標(biāo)懸停 對tbody有用
class="table-hover"
<table class="table table-bordered table-hover">
圖片.png
1.4 狀態(tài)類
寫在tr標(biāo)簽內(nèi)
<tr class="success">
| 樣式 | 說明 |
|---|---|
| active | 鼠標(biāo)懸停在行或單元格上 |
| success | 表示成功或積極的動作 |
| info | 標(biāo)識普通的提示信息或動作 |
| warning | 標(biāo)識警告或需用戶注意 |
| danger | 標(biāo)識危險或潛在的帶來負(fù)面影響的動作 |
1.5 隱藏行
<tr class="sr-only">
1.6 響應(yīng)式表格
表格父元素設(shè)置響應(yīng)式飘庄，小于768px出現(xiàn)邊框
<body class="table-responsive">
2.按鈕
2.1 a input button
class="btn"基本必帶
<a href="###" class="btn btn-default">Button</a>
<input type="button" class="btn btn-default" value="Button">
<button class="btn btn-default">Button</button>
| 樣式 | 說明 |
|---|---|
| btn-default | 默認(rèn)樣式 |
| btn-success | 成功樣式 |
| btn-info | 一般信息樣式 |
| btn-warning | 警告樣式 |
| btn-danger | 危險樣式 |
| btn-primary | 首選項樣式 |
| btn-link | 鏈接樣式 |
2.2 尺寸大小
class="btn-lg" "btn-sm" "btm-xs"
2.3 塊級換行
class="btn-block" 占用一整行
2.4 激活/禁用狀態(tài)
class="active"
class="disabled"
