Bootstrap 4 表格
Bootstrap 4 基本表格
一個基本的 Bootstrap 4 表格具有輕微的內邊距和水平分隔線。
.table 類為表格新增基本樣式
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
斑馬條紋行
.table-striped 類為表格新增斑馬條紋
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
帶邊框的表格
.table-bordered 類為表格和單元格的所有邊新增邊框
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
懸停行
.table-hover 類在表格行上新增懸停效果（灰色背景色）
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
黑色/深色表格
.table-dark 類為表格新增黑色背景
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
深色斑馬條紋表格
結合使用 .table-dark 和 .table-striped 建立一個深色、斑馬條紋的表格
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
可懸停的深色表格
.table-hover 類在表格行上新增懸停效果（灰色背景色）
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
無邊框表格
.table-borderless 類移除表格的邊框
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Contextual Classes
可以使用上下文類來為整個表格（<table>）、表格行（<tr>）或表格單元格（<td>）著色。
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| 預設值 | 預設 | def@somemail.com |
| 主色 | 喬 | joe@example.com |
| 成功 | Doe | john@example.com |
| 危險 | Moe | mary@example.com |
| 資訊 | Dooley | july@example.com |
| 警告 | Refs | bo@example.com |
| 啟用 | Activeson | act@example.com |
| 次色 | Secondson | sec@example.com |
| Light | Angie | angie@example.com |
| Dark | Bo | bo@example.com |
可以使用的上下文類是
| 類 | 描述 |
|---|---|
.table-primary |
藍色：表示一個重要的操作 |
.table-success |
綠色：表示一個成功或積極的操作 |
.table-danger |
紅色：表示一個危險的或可能負面的操作 |
.table-info |
淺藍色：表示一箇中性資訊性的更改或操作 |
.table-warning |
橙色：表示一個可能需要注意的警告 |
.table-active |
灰色：將懸停顏色應用於表格行或表格單元格 |
.table-secondary |
灰色：表示一個不太重要的操作 |
.table-light |
淺灰色表格或表格行背景 |
.table-dark |
深灰色表格或表格行背景 |
表頭顏色
.thead-dark 類為表頭新增黑色背景，.thead-light 類為表頭新增灰色背景
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
小型表格
.table-sm 類透過將單元格內邊距減半來使表格更小
示例
| 名 | 姓 | 郵箱 |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
響應式表格
.table-responsive 類在表格水平過大時新增捲軸
您還可以決定何時新增捲軸，這取決於螢幕寬度
| 類 | 螢幕寬度 |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
