Bootstrap - Bảng
Bootstrap cung cấp một bố cục gọn gàng để xây dựng bảng. Một số phần tử bảng được Bootstrap hỗ trợ là:
| Sr.No. | Thẻ & Mô tả |
|---|---|
| 1 | <table> Phần tử bao bọc để hiển thị dữ liệu ở định dạng bảng |
| 2 | <thead> Phần tử vùng chứa cho các hàng tiêu đề bảng (<tr>) để gắn nhãn các cột trong bảng. |
| 3 | <tbody> Phần tử vùng chứa cho các hàng của bảng (<tr>) trong phần nội dung của bảng. |
| 4 | <tr> Phần tử vùng chứa cho một tập hợp các ô trong bảng (<td> hoặc <th>) xuất hiện trên một hàng. |
| 5 | <td> Ô bảng mặc định. |
| 6 | <th> Ô bảng đặc biệt cho các nhãn cột (hoặc hàng, tùy thuộc vào phạm vi và vị trí). Phải được sử dụng trong <thead> |
| 7 | <caption> Mô tả hoặc tóm tắt về những gì bảng chứa. |
Bảng cơ bản
Nếu bạn muốn một kiểu bảng cơ bản, đẹp mắt chỉ với một số đệm nhẹ và các ngăn chia ngang, hãy thêm lớp cơ sở của .table vào bất kỳ bảng nào như được hiển thị trong ví dụ sau:
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>Các loại bảng tùy chọn
Cùng với đánh dấu bảng cơ sở và lớp .table, có một số lớp bổ sung mà bạn có thể sử dụng để tạo kiểu đánh dấu. Các phần tiếp theo sẽ cung cấp cho bạn một cái nhìn sơ lược về tất cả các lớp này.
Bàn sọc
Bằng cách thêm lớp .table-sọc , bạn sẽ nhận được các sọc trên các hàng trong <tbody> như được thấy trong ví dụ sau:
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Bảng có viền
Bằng cách thêm lớp .table-borderered , bạn sẽ nhận được các đường viền bao quanh mọi phần tử và các góc được làm tròn xung quanh toàn bộ bảng như trong ví dụ sau:
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Bảng di chuột
Bằng cách thêm lớp .table-hover , nền màu xám nhạt sẽ được thêm vào các hàng trong khi con trỏ di chuột qua chúng, như trong ví dụ sau:
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Bảng cô đọng
Bằng cách thêm lớp được cô đặc .table , phần đệm hàng được cắt làm đôi để cô đặc bảng. như trong ví dụ sau. Điều này rất hữu ích nếu bạn muốn có bất kỳ thông tin nào dày đặc hơn.
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Các lớp theo ngữ cảnh
Các lớp theo ngữ cảnh được hiển thị trong bảng sau sẽ cho phép bạn thay đổi màu nền của các hàng trong bảng hoặc các ô riêng lẻ.
| Sr.No. | Lớp & Mô tả |
|---|---|
| 1 | .active Áp dụng màu di chuột cho một hàng hoặc ô cụ thể |
| 2 | .success Cho biết một hành động thành công hoặc tích cực |
| 3 | .warning Cho biết một cảnh báo có thể cần chú ý |
| 4 | .danger Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực |
Các lớp này có thể được áp dụng cho <tr>, <td> hoặc <th>.
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>Bảng đáp ứng
Bằng cách gói bất kỳ .table nào trong lớp .table-responsive , bạn sẽ làm cho bảng cuộn theo chiều ngang tới 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, bạn sẽ không thấy bất kỳ sự khác biệt nào trong các bảng này.
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>