bs格式:
<table>
<thead>
//你可以把這個當作是table-head的縮寫
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
</tr>
</thead>
<tbody>
<tr>
<td>第1行</td>
<td>第2行</td>
<td>第3行</td>
</tr>
</tbody>
</table>
| ### | 標題一 | 標題二 | 標題三 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 4 | 5 | 6 |
| 3 | 7 | 8 | 9 |
可以用colspan="數字"、rowspan="數字"這個屬性合併欄位
| # | 標題一 | 標題二 | 標題三 |
|---|---|---|---|
| 1 | 1 | 2+3 | |
| 2 | 4 | 5+8 | 6 |
| 3 | 7 | 9 | |
只有橫線的表格
什麼都不加
| 姓名 | 學號 |
|---|---|
| ABC | 123 |
| DEF | 456 |
| XYZ | 789 |
在奇數列標上條紋
table-striped
| 姓名 | 學號 |
|---|---|
| ABC | 123 |
| DEF | 456 |
| XYZ | 789 |
滑鼠指到的 row 會變色
table-hover
| 姓名 | 學號 |
|---|---|
| ABC | 123 |
| DEF | 456 |
| XYZ | 789 |
如果頁面上,需要用很多小方格來排版(例如:作品展示等),就很適合使用 grid 來進行。Grid 用法跟表格很相似,我們需要將內容放在由 (row)組成的框框(column)裡面
格式:
<div class="container"><div class="row">/* 如果不給數字視同等分(預設)*/<div class="col-數字控制占比">第一個</div><div class="col-數字控制占比">第二個</div><div class="col-數字控制占比">第三個</div></div></div>
預設是等分:
Bootstrap 的 grid 是分成 12 份,也可以選擇每份的佔比:
如果超過12???