Table trong bootstrap bao gồm một lớp đệm và một đường chỉ ngang để phân biệt giữa các dòng.
Thêm
.table vào bảng :
Ví dụ :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Kết quả :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Tạo nền xen kẻ
Sử dụng lớp
.table-striped để tạo nền xen kẻ trong bảng :
Ví dụ :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Kết quả :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Tạo đường viền
Sử dụng lớp
.table-bordered để tạo đường viền trong bảng :
Ví dụ :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Kết quả :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Tạo hiệu ứng hover
Sử dụng lớp
.table-hover để tạo hiệu ứng hover, khi di chuột vào một dòng trong bảng thì dòng đó sẽ được tô nền, có thể sử dụng
.active để làm nổi bậc một dòng mặc định :
Ví dụ :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Kết quả :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Tạo bảng đặc
Sử dụng lớp
.table-condensed làm cho bảng nhỏ gon hơn bằng cách bỏ bớt các cell padding :
Ví dụ :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Kết quả :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Tạo bảng đa màu theo ngữ cảnh
Các lớp màu nền theo ngữ cảnh có thể được sử dụng trong thẻ
<tr> hoặc thẻ
<td>.
Ví dụ :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Kết quả :
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
Chào bạn ! Mình là Unknown, rất mê phim kiếm hiệp và vẫn FA. Bạn có thể tìm mình qua :
0 comments:
Post a Comment