Hướng dẫn bootstrap table example - ví dụ bảng bootstrap

.thead-dark .thead-light

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. Nội dung chính Show 1- Table cơ bản 2- Header Color 3- Cell Color 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: .table .table-striped .table .table-bordered .table-striped Sử dụng .table-borderless + .table-dark để tạo ra một bảng không viền, với mầu nền tối. Lớp .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: 8- Table .table-sm 10- Kích thước cột Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook Facebook 1- Table cơ bản Table (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) , và một vài lớp bổ xung để tạo ra một bảng theo ý muốn. Á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 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: 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 Basic Bootstrap Table No Language Percent 1 Java 14.21% 2 C 11.03% 3 C++ 5.60% 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: .table-primary .table-secondary .table-success .table-danger .table-warning .table-info .table-light .table-dark .table-muted .table-white 2- Header Color 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ẻ

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:

• .table-primary
• .table-secondary
• .table-success
• .table-danger
• .table-warning
• .table-info
• .table-light
• .table-dark
• .table-muted
• .table-white

3- Cell Color

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:

• .table-primary
• .table-secondary
• .table-success
• .table-danger
• .table-warning
• .table-info
• .table-light
• .table-dark
• .table-muted
• .table-white

3- Cell Color

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

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:

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

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

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.

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

.table .table-striped

.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

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

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

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

.table .table-bordered .table-striped

.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

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

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

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

Sử dụng .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-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

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

Lớp .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:

.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

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

8- Table .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ẻ

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.

Css Class	Mô tả
.table-responsive	Nếu bảng không thể tự thu nhỏ chiều rộng của nó hơn nữa, thanh cuộn nằm ngang sẽ xuất hiện.
.table-responsive-sm	Nếu chiều rộng của thiết bị (hoặc trình duyệt) nhỏ hơn 567px và bảng không thể tự thu nhỏ chiều rộng của nó hơn nữa, thanh cuộn nằm ngang sẽ xuất hiện. 567px và bảng không thể tự thu nhỏ chiều rộng của nó hơn nữa, thanh cuộn nằm ngang sẽ xuất hiện.
.table-responsive-md	Nếu chiều rộng của thiết bị (hoặc trình duyệt) nhỏ hơn 768px và bảng không thể tự thu nhỏ chiều rộng của nó hơn nữa, thanh cuộn nằm ngang sẽ xuất hiện. 768px và bảng không thể tự thu nhỏ chiều rộng của nó hơn nữa, thanh cuộn nằm ngang sẽ xuất hiện.
.table-responsive-lg	Nếu chiều rộng của thiết bị (hoặc trình duyệt) nhỏ hơn 992px và bảng không thể tự thu nhỏ chiều rộng của nó hơn nữa, thanh cuộn nằm ngang sẽ xuất hiện. 992px và bảng không thể tự thu nhỏ chiều rộng của nó hơn nữa, thanh cuộn nằm ngang sẽ xuất hiện.
.table-responsive-xl	Nếu chiều rộng của thiết bị (hoặc trình duyệt) nhỏ hơn 1200px và bảng không thể tự thu nhỏ chiều rộng của nó hơn nữa, thanh cuộn nằm ngang sẽ xuất hiện. 1200px và bảng không thể tự thu nhỏ chiều rộng của nó hơn nữa, thanh cuộn nằm ngang sẽ xuất hiện.

responsive-table-example.html

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

1

10- Kích thước cột

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%.

• Giải pháp: Hãy sử dụng style ="width: X%". Hãy sử dụng style ="width: X%".

style="width:X%"

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

2

Example 2:

Bạn có một bảng với 3 cột, và bạn muốn:

Với các thiết bị có chiều rộng >= 567px	3 cột sẽ có tỷ lệ chiều rộng là: 1:9:21:9:2
Với các thiết bị có chiều rộng < 567px	3 cột sẽ có tỷ lệ chiều rộng là: 3:3:63:3:6

.d-flex + .col[-sm|-md|-lg|-xl]-*

   

      

         
No
         
Language
         
Percent
      
   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

3

Đọc tiếp

programming bootstrap Bootstrap table Bootstrap table-responsive Table w3school Table Bootstrap 5 DataTable Bootstrap Table responsive Bootstrap sử dụng

Reply 7 0 Chia sẻ