Bootstrap Table – bảng bootstrap và bảng html có gì khác nhau? Trước khi tìm hiểu bảng bootstrap trong đầu mình cũng đã có suy nghĩ này, và mình cũng tưởng tượng ra chắc chắn bảng bootstrap có tính năng gì đó tiện ích hơn bảng html chứ. Trong đầu bạn có cùng suy nghĩ với mình trước kia không? Nếu bạn có cùng suy nghĩ với mình thì bạn đã đúng rồi. Vậy cụ thể bảng bootstrap tiện ích như thế nào chúng ta sẽ cùng tìm hiểu trong các phần dưới:
Xem thêm: Hướng dẫn học HTML, CSS Hướng dẫn học HTML, CSS Hướng dẫn học HTML, CSS
- Lớp .table
Bảng html bạn cần sử dụng các thuộc tính để tạo khoảng cách, vạch ngăn giữa các hàng, giúp người xem dễ dàng đọc bảng hơn. Nhưng với bảng bootstrap bạn không cần thủ công đến vậy,bạn chỉ cần thêm lớp .table vào thẻ , lớp .table có thuộc tính padding sẽ tạo ra một khoảng cách nhỏ theo hàng ngang, giúp bảng dễ xem hơn.
Khi chưa sử dụng lớp .table
Khi sử dụng lớp .table
Xem thêm: Bootstrap là gì? Cách sử dụng bootstrap trong thiết kế website. Bootstrap là gì? Cách sử dụng bootstrap trong thiết kế website. Bootstrap là gì? Cách sử dụng bootstrap trong thiết kế website.
- Lớp .table-striped
Lớp .table-striped sẽ tự động thêm thuộc tính background-color với mã màu #F9F9F9 vào các thẻ cách nhau một giúp bảng của bạn xem dễ dàng hơn.
- Lớp .table-bordered
Lớp .table-bordered thêm thuộc tính border: 1px solid #ddd bao xung quanh tất cả các mặt của bảng và tạo vạch ngăn giữa các cột .
- Lớp .table-hover
Lớp .table-hover thêm hiệu ứng hover với thuộc tính background-color mã màu #F5F5F5 khi trỏ chuột vào các hàng trong bảng.
Xem thêm: Bootstrap Grid System: Hệ thống lưới trong bootstrap
- Lớp table-condensed
Lớp .table-condensed giúp bảng nhỏ gọn hơn bằng cách giảm một nửa padding của bảng.
- Lớp .table –responsive
Lớp .table-responsive giúp bảng hiển thị tốt trên các màn hình có chiều rộng 768px bảng hiển thị không có gì khác so với màn có chiều rộng
- Một số lớp khác
Một số lớp khác được sử dụng để tô màu cho các hàng < tr > hoặc các ô trong bảng < td >
+ Lớp .active: thêm thuộc tính background-color mã màu #F5F5F5 vào các thẻ
+ Lớp .success: thêm thuộc tính background-color mã màu #DFF0D8 vào các thẻ
+ Lớp .info: thêm thuộc tính background-color mã màu #D9EDF7 vào các thẻ
+ Lớp .warning: thêm thuộc tính background-color mã màu #FCF8E3 vào các thẻ
+ Lớp .danger: thêm thuộc tính background-color mã màu #F2DEDE vào các thẻ
Phần bảng bootstrap này khác ngắn và dễ nhớ, bạn hãy bắt tay vào sử dụng những lớp trên tạo ra những bảng danh sách, bảng phân tích, bảng theo dõi…đầy màu sắc và dễ xem nhé.
Xem thêm: Quy trình viết bài Chuẩn SEO toàn tập Quy trình viết bài Chuẩn SEO toàn tập Quy trình viết bài Chuẩn SEO toàn tập
Dùng bootstrap 3 để để tạo ra table thì rất là đơn giản, chỉ cần vài dòng code là các bạn có ngay một table nhìn rất bắt mắt cũng như rất dễ tinh chỉnh so với table html thông thường. Để không làm mất thời gian quý báu của các bạn thì chúng ta sẽ tìm hiểu xem bootstrap 3 hỗ trợ phần stylesheet table ra sao nhé. Để tạo một table đơn giản nhưng đẹp mắt trong bootstrap 3 thì ta chỉ cần tuân theo cấu trúc HTML Table bình thường, đồng thời thêm một Ví dụ: Hiển thị một table đơn giản với bootstrap 3: Hiển thị một table đơn giản với bootstrap 3 Để có thể tạo ra table giống trong hình thì ngay phần class Ở phần này cũng giống như phần striped. Các bạn chỉ viêc thêm vào class Đây là class dùng để định nghĩa khi các bạn rê chuột vào cột thì sẽ hover lên background ngay dòng đó. Sử dụng bằng cách thêm vào class Phần này giúp cho các bạn thu nhỏ table lại nhìn cho nó gọn và bắt mắt hơn.Sử dụng bằng cách thêm vào class Phần này giúp các bạn dễ dàng tạo ra một table với màu sắc riêng từng dòng và tự động co giãn khi thu nhỏ trình duyêt. Sử dụng bằng cách bọc tất cả thành phần table vào class1. Tạo table đơn giản với boostrap 3
class="table"
vào. Một lưu ý nữa lớp .table
trong bootstrap nó sẽ tự nhận diện hai group thead dùng hiển thị title và tbody dùng hiển thị nội dung nên bạn phải tuân thủ theo cấu trúc này nhé.thead dùng hiển thị title
và tbody dùng hiển thị nội dung nên bạn phải tuân thủ theo cấu trúc này nhé.2. Class table-striped trong bootstrap
table
các bạn chỉ cần thêm vào class table-striped
thì mọi thứ xem như được giải quyết. Đơn giản quá đúng không nào, và tôi dám cá rằng có bạn đang thốt lên rằng sử dụng bootstrap 3 tạo ra table sao mà đơn giản quá.3. Class table-bordered trong bootstrap
table-bordered
thì sẽ có được một cái table được bao bọc trong đường viền. Câu hỏi đưa ra ở đây là tôi vừa muốn table có đường viền và các dòng được tô trắng & đen thì làm như thế nào ? Xin thưa rằng các bạn thêm trực tiếp class table-striped
vào kế bên thì kêt quả sẽ đúng như sự mong muốn của các bạn.4. Class table-hover trong bootstrap 3
table-hover
.5. Class table-condensed trong bootstrap
table-condensed
.6. Stylesheet & Responsive màu sắc cho table
table-responsive
, còn phần màu sắc của các dòng thì ngay chỗ thẻ tr
các bạn thêm vào các class như là warning,danger, active..vvvwarning,danger, active..vvv
Lời kết:
Kết thúc bài này xem như tôi vừa hướng dẫn các bạn cách stylesheet table trong bootstrap 3. Hy vọng các bạn sẽ lựa chọn cho mình kiểu table ưng ý nhất, hẹn gặp các bạn ở các bài tiếp theo :].