Hướng dẫn bootstrap table data - dữ liệu bảng bootstrap

   
      
      Basic Bootstrap Table
      
   
   
      

         
Basic Bootstrap Table
         

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ẻ :

.thead-dark .thead-light

         No
         Language
         Percent
      

   

      

   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

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ẻ

         No
         Language
         Percent
      

   

      

   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

         No
         Language
         Percent
      

   

      

   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%
      
   

         No
         Language
         Percent
      

   

      

   
   

      

         
1
         
Java
         
14.21%
      
      

         
2
         
C
         
11.03%
      
      

         
3
         
C++
         
5.60%