HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bảng Bootstrap

❮ Trước Kế tiếp ❯

Bảng cơ bản Bootstrap

Một bảng Bootstrap cơ bản có một lớp đệm nhẹ và chỉ có các đường chia ngang.

Lớp .tablethêm kiểu cơ bản vào bảng:

Thí dụ

Firstname Lastname Email
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 Email
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 Email
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 Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Bảng cô đọng

Lớp .table-condensedlàm cho bảng nhỏ gọn hơn bằng cách cắt phần đệm ô làm đôi:

Thí dụ

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Các lớp theo ngữ cảnh

Các lớp ngữ cảnh có thể được sử dụng để tô màu các hàng trong bảng ( <tr>) hoặc các ô trong bảng ( <td>):

Thí dụ

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

Các lớp ngữ cảnh có thể được sử dụng là:

Lớp học Sự miêu tả
.active Áp dụng màu di chuột cho hàng trong bảng hoặc ô trong bảng
.success Cho biết một hành động thành công hoặc tích cực
.info Cho biết một hành động hoặc thay đổi mang tính thông tin trung tính
.warning Cho biết một cảnh báo có thể cần chú ý
.danger Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực

Bảng đáp ứng

Lớp .table-responsivetạo một bảng đáp ứng. Sau đó, bảng sẽ cuộn theo chiều ngang trên các thiết bị nhỏ (dưới 768px). Khi xem trên bất kỳ thứ gì có chiều rộng lớn hơn 768px, không có sự khác biệt:

Thí dụ

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Kiểm tra bản thân với các bài tập

Bài tập:

Thêm một thuộc tính lớp để tạo kiểu bảng như một bảng Bootstrap cơ bản.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Toàn bộ tham chiếu bảng Bootstrap

Để có tài liệu tham khảo đầy đủ về tất cả các lớp bảng, hãy truy cập Tài liệu tham khảo bảng Bootstrap đầy đủ của chúng tôi .


❮ Trước Kế tiếp ❯