Hướng dẫn bootstrap table data - dữ liệu bảng bootstrap
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi. Show
1- Table cơ bảnTable (bảng) là một trong các thành phần được sử dụng rộng rãi trong trang. Để có được một bảng theo phong cách của Bootstrap khá đơn giản, bạn chỉ cần áp dụng lớp .table cho các thẻ (tag) , và một vài lớp bổ xung để tạo ra một bảng theo ý muốn. (bảng) là một trong các thành phần được sử dụng rộng rãi trong trang. Để có được một bảng theo phong cách của Bootstrap khá đơn giản, bạn chỉ cần áp dụng lớp
.table cho các thẻ (tag) Áp dụng lớp .table cho bạn sẽ có một bảng cơ bản nhất theo phong cách của Bootstrap. Hình minh họa dưới đây cho bạn thấy sự khác biệt giữa một bảng mặc định và một bảng được áp dụng lớp .table: .table cho Lớp .table thiết lập chiều rộng 100% và mầu nền trong suốt (transparent) cho bảng, thiết lập padding cho các ô (cell), ... .table thiết lập chiều rộng 100% và mầu nền trong suốt (transparent) cho bảng, thiết lập padding cho các ô (cell), ... basic-table-example.html Lớp .table áp dụng mầu nền trong suốt (transparent) cho bảng, tuy nhiên nếu bạn muốn có mầu nền khác có thể sử dụng một vài lớp có sẵn sau: .table áp dụng mầu nền trong suốt (transparent) cho bảng, tuy nhiên nếu bạn muốn có mầu nền khác có thể sử dụng một vài lớp
có sẵn sau: Bạn có thể thiết lập mầu nền cho Header của bảng bằng cách sử dụng lớp .thead-dark hoặc .thead-light cho thẻ : Header của bảng bằng cách sử dụng lớp .thead-dark hoặc .thead-light cho thẻ : .thead-dark .thead-light Ngoài ra để thiết lập mầu nền cho Header của bảng, bạn cũng có thể sử dụng các lớp dưới đây: Header của bảng, bạn cũng có thể sử dụng các lớp dưới đây: Ví dụ dưới đây chỉ cho bạn cách thiết lập mầu nền cho các ô của bảng: 3- Cell Color Background color on Cells.table-striped bạn có thể tạo ra một bảng có các kẻ sọc (Striped table), điều này có nghĩa là các dòng lẻ và các dòng chẵn trong sẽ có mầu
nền khác nhau, nó giúp người dùng dễ dàng quan sát. 4- Striped Table Sử dụng lớp .table-striped bạn có thể tạo ra một bảng có các kẻ sọc (Striped table), điều này có nghĩa là các dòng lẻ và các dòng chẵn trong sẽ có mầu nền khác nhau, nó giúp người dùng dễ dàng quan sát. .table .table-striped .table-dark.table-bordered sẽ tạo ra viền (border) cho 4 cạnh của bảng, và tất cả các cạnh của tất cả các ô của bảng. 5- Bordered Table Lớp .table-bordered sẽ tạo ra viền (border) cho 4 cạnh của bảng, và tất cả các cạnh của tất cả các ô của bảng. .table .table-bordered .table .table-bordered .table-striped.table-borderless giúp bạn tạo ra một bảng hoàn toàn không có viền (border), các cạnh của bảng sẽ không có viền, và tất cả các ô (cell) của bảng cũng vậy. 6- Borderless Table Lớp .table-borderless giúp bạn tạo ra một bảng hoàn toàn không có viền (border), các cạnh của bảng sẽ không có viền, và tất cả các ô (cell) của bảng cũng vậy. .table-borderless + .table-dark để tạo ra một bảng không viền, với mầu nền tối. .table .table-borderless .table .table-borderless .table-dark.table-hover giúp tạo ra hiệu ứng (effect) đổi mầu nền khi con trỏ (pointer) di chuyển phía trên các dòng (row) của
bảng (Chỉ các dòng trong ). Hiệu ứng này giống hình minh họa dưới đây: 7- Hoverable rows .table .table-hover thiết lập padding cho các ô của bảng, giá trị này mặc định là 0.75rem, nếu bạn cần một bảng nhỏ
gọn hơn, hãy sử dụng lớp .table-sm, lớp này làm giá trị của padding giảm đi một nửa. Dưới đây là hình ảnh minh họa một bảng không sử dụng lớp .table-sm và một bảng khác có sử dụng .table-sm. .table-sm Bootstrap thiết lập padding cho các ô của bảng, giá trị này mặc định là 0.75rem, nếu bạn cần một bảng nhỏ gọn hơn, hãy sử dụng lớp .table-sm, lớp này làm giá trị của padding giảm đi một nửa. Dưới đây là hình ảnh minh họa một bảng không sử dụng lớp .table-sm và một bảng khác có sử dụng .table-sm. Giải pháp của Bootstrap là sử dụng một thẻ bao lấy (wrap) một bảng, thanh cuộn (scroll bar) nằm ngang sẽ xuất hiện trên thẻ nếu bảng không thể tự thu nhỏ chiều rộng của nó thêm nữa. Như vậy thanh cuộn nằm ngang sẽ xuất hiện trên thẻ thay vì xuất hiện trên trình duyệt. Bootstrap là sử dụng một thẻ
responsive-table-example.html Với Google, tôi đã tìm thấy một vài giải pháp để thiết lập chiều rộng cho các cột của một bảng trong Bootstrap. Tuy nhiên sau khi kiểm tra tôi thấy rằng có giải pháp hoạt động tốt với Firefox nhưng lại không hoạt động với Chrome. Dưới đây tôi đưa ra một vài ví dụ và giải pháp mà tôi cho rằng nó là tốt nhất: Google, tôi đã tìm thấy một vài giải pháp để thiết lập chiều rộng cho các cột của một bảng trong Bootstrap. Tuy nhiên sau khi kiểm tra tôi thấy rằng có giải pháp hoạt động tốt với Firefox nhưng lại không hoạt động với Chrome. Dưới đây tôi đưa ra một vài ví dụ và giải pháp mà
tôi cho rằng nó là tốt nhất: Example 1: Một bảng có 3 cột. Cột thứ nhất có chiều rộng 10%, cột thứ 2 có chiều rộng 70%, cột thứ 3 có chiều rộng 20%. style="width:X%" Example 2: Bạn có một bảng với 3 cột, và bạn muốn:
.d-flex + .col[-sm|-md|-lg|-xl]-* |