Bootstrap 5 bảng
Bảng cơ bản
Bảng Bootstrap 5 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:
Hàng sọc
Lớp .table-striped thêm sọc ngựa vằn vào bảng:
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à ô:
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:
Bảng đen/tối
Lớp .table-dark thêm nền đen vào bảng:
Bàn sọc đen
Kết hợp .table-dark và .table-striped để tạo một bảng sọc tối:
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:
Bảng không viền
Lớp .table-borderless loại bỏ đường viền khỏi bảng:
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ụ
| 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
Bạn cũng có thể sử dụng bất kỳ lớp ngữ cảnh nào để chỉ thêm màu nền vào tiêu đề bảng:
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:
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 độ 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 |
.table-responsive-xxl | < 1400px |
Bạn có biết không?
W3.CSS là một sự thay thế tuyệt vời cho Bootstrap 5.
W3.CSS nhỏ hơn, nhanh hơn và dễ sử dụng hơn.
Nếu bạn muốn tìm hiểu W3.CSS, hãy truy cập Hướng dẫn W3.CSS của chúng tôi.
