Bootstrap 4 bảng
Bảng cơ bản Bootstrap 4
Bàn Bootstrap 4 cơ bản có một lớp đệm nhẹ và các tấm ngăn ngang.
Lớp .tablethêm kiểu cơ bản vào bảng:
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Hàng sọc
Lớp .table-stripedthêm các sọc ngựa vằn vào bảng:
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Bảng có viền
Lớp .table-borderedthêm đường viền trên tất cả các mặt của bảng và các ô:
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Di chuột hàng
Lớp .table-hoverthêm hiệu ứng di chuột (màu nền xám) trên các hàng của bảng:
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Bảng đen / tối
Lớp .table-darkthêm nền đen vào bảng:
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Bàn sọc sẫm màu
Kết hợp .table-darkvà .table-stripedđể tạo một bảng tối, có sọc:
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Bảng tối có thể lưu được
Lớp .table-hoverthêm hiệu ứng di chuột (màu nền xám) trên các hàng của bảng:
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Bảng không viền
Lớp .table-borderlessloại bỏ các đường viền khỏi bảng:
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Các lớp theo ngữ cảnh
Các lớp theo ngữ cảnh có thể được sử dụng để tô màu toàn bộ bảng ( <table>), các hàng trong bảng ( <tr>) hoặc các ô trong bảng ( <td>).
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | [email protected] |
| Primary | Joe | [email protected] |
| Success | Doe | [email protected] |
| Danger | Moe | [email protected] |
| Info | Dooley | [email protected] |
| Warning | Refs | [email protected] |
| Active | Activeson | [email protected] |
| Secondary | Secondson | [email protected] |
| Light | Angie | [email protected] |
| Dark | Bo | [email protected] |
Các lớp ngữ cảnh có thể được sử dụng là:
| Lớp học | Sự miêu tả |
|---|---|
.table-primary |
Màu xanh lam: Biểu thị một hành động quan trọng |
.table-success |
Màu xanh lá cây: Biểu thị một hành động thành công hoặc tích cực |
.table-danger |
Màu đỏ: Biểu thị một hành động nguy hiểm hoặc có khả năng tiêu cực |
.table-info |
Màu xanh lam nhạt: Biểu thị hành động hoặc thay đổi mang tính thông tin trung tính |
.table-warning |
Màu cam: Cho biết một cảnh báo có thể cần chú ý |
.table-active |
Màu xám: Áp dụng màu di chuột cho hàng trong bảng hoặc ô trong bảng |
.table-secondary |
Màu xám: Biểu thị một hành động kém quan trọng hơn một chút |
.table-light |
Bảng màu xám nhạt hoặc nền hàng bảng |
.table-dark |
Bảng màu xám đậm hoặc nền hàng bảng |
Màu đầu bảng
Lớp .thead-darkthêm nền đen vào tiêu đề bảng và .thead-lightlớp thêm nền xám cho tiêu đề bảng:
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Bàn nhỏ
Lớp .table-smlàm cho bảng nhỏ hơn bằng cách cắt phần đệm ô làm đôi:
Thí dụ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Bảng đáp ứng
Lớp .table-responsivethêm một thanh cuộn vào bảng khi cần thiết (khi nó quá lớn theo chiều ngang):
Thí dụ
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Bạn cũng có thể quyết định khi nào bảng sẽ có thanh cuộn, tùy thuộc vào chiều rộng màn hình:
| Lớp học | Độ rộng màn hình |
|---|---|
.table-responsive-sm |
<576px |
.table-responsive-md |
<768px |
.table-responsive-lg |
<992px |
.table-responsive-xl |
<1200px |
Thí dụ
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>