<table>標籤

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

只有橫線的表格

什麼都不加
姓名 學號
ABC123
DEF456
XYZ789

在奇數列標上條紋

table-striped
姓名 學號
ABC123
DEF456
XYZ789

滑鼠指到的 row 會變色

table-hover
姓名 學號
ABC123
DEF456
XYZ789

一些預設的底色

其他顏色
姓名 學號 備註
ABC123123
DEF456很高分
GHI000有點慘
XYZ789不及格
看更多Bs範例

格線(grid)

如果頁面上,需要用很多小方格來排版(例如:作品展示等),就很適合使用 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 份,也可以選擇每份的佔比:

這裡是9
這裡是3

這裡是10
這裡是2

如果超過12???

這裡是15
這裡是20