Bootstrap 4 bảng
Bảng cơ bản của Bootstrap 4
Bảng Bootstrap 4 cơ bản có phần đệm nhẹ và các ngăn ngang.
Lớp .table
thêm kiểu dáng cơ bản vào bảng:
Ví dụ
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
Hàng sọc
Lớp .table-striped
thêm sọc ngựa vằn vào bảng:
Ví dụ
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
Bảng có viền
Lớp .table-bordered
thêm đường viền trên tất cả các cạnh của bảng và ô:
Ví dụ
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
Hàng di chuột
Lớp .table-hover
thêm hiệu ứng di chuột (màu nền xám) trên các hàng của bảng:
Ví dụ
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
Bảng đen/tối
Lớp .table-dark
thêm nền đen vào bảng:
Ví dụ
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
Bàn sọc đen
Kết hợp .table-dark
và .table-striped
để tạo một bảng sọc tối:
Ví dụ
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
Bàn tối có thể di chuyển
Lớp .table-hover
thêm hiệu ứng di chuột (màu nền xám) trên các hàng của bảng:
Ví dụ
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
Bảng không viền
Lớp .table-borderless
loại bỏ đường viền khỏi bảng:
Ví dụ
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
Lớp học 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 của bảng ( <tr>
) hoặc các ô trong bảng ( <td>
).
Ví 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: Biểu thị một hành động quan trọng |
.table-success | Màu xanh lá cây: Biểu thị hành động thành công hoặc tích cực |
.table-danger | Màu đỏ: Biểu thị hành động nguy hiểm hoặc có khả năng tiêu cực |
.table-info | Màu xanh nhạt: Biểu thị một hành động hoặc thay đổi mang tính thông tin trung lập |
.table-warning | Màu cam: Biểu thị 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 hoặc ô của bảng |
.table-secondary | Màu xám: Biểu thị một hành động ít quan trọng hơn một chút |
.table-light | Nền bảng hoặc hàng bảng màu xám nhạt |
.table-dark | Nền bảng hoặc hàng bảng màu xám đậm |
Màu đầu bảng
Lớp .thead-dark
thêm nền đen cho tiêu đề bảng và lớp .thead-light
thêm nền màu xám cho tiêu đề bảng:
Ví 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-sm
làm cho bảng nhỏ hơn bằng cách cắt phần đệm ô làm đôi:
Ví dụ
Firstname | Lastname | |
---|---|---|
John | Doe | [email protected] |
Mary | Moe | [email protected] |
July | Dooley | [email protected] |
Bảng đáp ứng
Lớp .table-responsive
thêm thanh cuộn vào bảng khi cần (khi nó quá lớn theo chiều ngang):
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 |