Làm cách nào để thêm màu cho tiêu đề bảng trong Bootstrap?

Ví dụ về các lớp Contingent cho bảng

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

5. Các lớp ngẫu nhiên được sử dụng để tô màu các hàng của bảng hoặc các ô riêng lẻ. Nó sử dụng Bootstrap theo màu mặc định

Các tùy chọn bảng màu Quản trị viên hiện đại cũng có thể được sử dụng cho các lớp dự phòng, Để đặt độ sáng màu bg đã chọn, hãy sử dụng

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

6 trong đó

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

7 là giá trị của màu bạn đã chọn từ bảng màu và cùng với đó, sử dụng lớp

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

8 hoặc

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

9 trong đó

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

7 là giá trị giữa ' . Vì vậy, đối với lớp làm sáng màu 4 bg sẽ là

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

1

Trong bài viết này, chúng ta sẽ thảo luận về cách đặt màu nền của các hàng trong bảng & cách đặt màu nền cho một ô riêng lẻ bằng Bootstrap. Bootstrap cung cấp một loạt các lớp có thể được sử dụng để áp dụng nhiều kiểu dáng khác nhau cho bảng chẳng hạn như thay đổi hình thức tiêu đề, làm cho các hàng bị tước bỏ, thêm hoặc xóa đường viền, làm cho các hàng có thể di chuột được, v.v. Bootstrap cũng cung cấp các lớp để tạo các bảng phản hồi nhanh

Mục đích của việc tạo bảng là để hiển thị dữ liệu phức tạp và có kích thước lớn ở định dạng có cấu trúc đơn giản, nhỏ gọn, cung cấp nội dung thông tin khi nhìn lướt qua. Điều này sẽ tiết kiệm thời gian để đọc và phân tích dữ liệu lớn phi cấu trúc. Bootstrap giúp tạo & trang trí nội dung chuẩn. Chúng tôi sẽ sử dụng các lớp tích hợp bootstrap để tạo cấu trúc bảng. Một bảng HTML đơn giản có thể được tạo bằng cú pháp dưới đây

cú pháp

 Table Contents.. 
Trước khi vào phần thảo luận chính, kiến ​​thức về tạo bảng bằng HTML sẽ giúp bạn hiểu bài viết tốt hơn. Vui lòng tham khảo Bootstrap 4. Bảng cho nhiều trường hợp khác của bảng trong bootstrap
Liên kết CDN Bootstrap. Hãy lấy một ví dụ để hiểu cách thiết lập và thêm liên kết Bootstrap CDN để áp dụng các lớp được xác định trước bootstrap để tạo bảng



Ví dụ
HTML




  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
2

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3______34

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
5

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
6

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3____38

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
5

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
0

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
21 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
29

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
23

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
31 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
32

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
23

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
34 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
25
Tương tự như bảng mặc định và bảng nghịch đảo, hãy sử dụng một trong hai lớp bổ trợ để làm cho s có màu xám nhạt hoặc đậm
#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
hàng sọc
Sử dụng 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
7 để thêm sọc vằn vào bất kỳ hàng nào trong bảng
#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
bảng có viền
Thêm 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
8 cho đường viền trên tất cả các mặt của bảng và ô



#First NameLast NameUsername1MarkOtto@mdo2MarkOtto@TwBootstrap3JacobThornton@fat4Larry the Bird@twitter

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Mark
      Otto
      @TwBootstrap
    
    
      3
      Jacob
      Thornton
      @fat
    
    
      4
      Larry the Bird
      @twitter
    
  
#First NameLast NameUsername1MarkOtto@mdo2MarkOtto@TwBootstrap3JacobThornton@fat4Larry the Bird@twitter

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Mark
      Otto
      @TwBootstrap
    
    
      3
      Jacob
      Thornton
      @fat
    
    
      4
      Larry the Bird
      @twitter
    
  
Hàng có thể di chuột
Thêm 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
9 để kích hoạt trạng thái di chuột trên các hàng của bảng trong một
#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry the Bird
      @twitter
    
  
#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry the Bird
      @twitter
    
  
Bàn nhỏ
Thêm 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
0 để làm cho các bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô
#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry the Bird
      @twitter
    
  
#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry the Bird
      @twitter
    
  
các lớp theo ngữ cảnh
Sử dụng các lớp theo ngữ cảnh để tô màu các hàng của bảng hoặc các ô riêng lẻ



Mô tả lớp

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
1Áp dụng màu di chuột cho một hàng hoặc ô cụ thể

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
2Cho biết một hành động thành công hoặc tích cực

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3Cho biết một hành động hoặc thay đổi thông tin trung lập

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
4Cho biết một cảnh báo có thể cần chú ý

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
5Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực
#Tiêu đề cộtTiêu đề cộtTiêu đề cột1Nội dung cộtNội dung cộtNội dung cột2Nội dung cộtNội dung cộtNội dung cột3Nội dung cộtNội dung cộtNội dung cột4Nội dung cộtNội dung cộtNội dung cột5Nội dung cộtNội dung cột6Nội dung cộtNội dung cột7Nội dung cộtNội dung cột8Nội dung cộtNội dung cột9Nội dung cột9Nội dung cộtNội dung cột

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
1
Các biến thể nền của bảng thông thường không khả dụng với bảng nghịch đảo, tuy nhiên, bạn có thể sử dụng các tiện ích nền hoặc văn bản để đạt được các kiểu tương tự
#Tiêu đề cộtTiêu đề cộtTiêu đề cột1Nội dung cộtNội dung cộtNội dung cột2Nội dung cộtNội dung cộtNội dung cột3Nội dung cộtNội dung cộtNội dung cột4Nội dung cộtNội dung cộtNội dung cột5Nội dung cộtNội dung cột6Nội dung cộtNội dung cột7Nội dung cộtNội dung cột8Nội dung cộtNội dung cột9Nội dung cột9Nội dung cộtNội dung cột

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
1
Truyền đạt ý nghĩa cho các công nghệ hỗ trợ
Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung (e. g. văn bản hiển thị), hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
6
bảng đáp ứng
Tạo các bảng đáp ứng bằng cách thêm 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
7 vào bất kỳ 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
4 nào để làm cho chúng cuộn theo chiều ngang trên các thiết bị nhỏ (dưới 768px). Khi xem trên bất kỳ thứ gì rộng hơn 768px, bạn sẽ không thấy bất kỳ sự khác biệt nào trong các bảng này
Các bảng đáp ứng sử dụng 

  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First Name
      Last Name
      Username
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
9, loại bỏ bất kỳ nội dung nào nằm ngoài các cạnh dưới cùng hoặc trên cùng của bảng. Đặc biệt, điều này có thể loại bỏ các menu thả xuống và các tiện ích con của bên thứ ba khác
#Table headingTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảng1Table cellTable cellTable cellTable cellTable cellTable cell2Table cellTable cellTable cellTable cellTable cell3Table cellTable cellTable cellTable cellTable cell#Table headerTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảng1Table cellTable cellTable cellTable cell2Table cellTable cellTable cellTable cellTable cellTable cell3Table cellTable cellTable cell 
Làm cách nào để thay đổi màu của tiêu đề bảng trong Bootstrap?
Chọn màu cho tiêu đề bảng của bạn, thêm màu này vào.  table-* và đặt mọi thứ vào phần tử 
Làm cách nào để cung cấp màu đường viền bảng trong Bootstrap?
Chỉ sử dụng style="border-color. trắng;" đặt viền bảng thành màu trắng nhưng chúng đang bị kiểu thứ và td ghi đè. Bạn cũng phải đặt nó cho mọi thứ và td. Nếu bạn chỉ sử dụng Inline css thì sẽ tốn thời gian. 
Làm cách nào để thay đổi màu di chuột của bảng trong Bootstrap?
sử dụng các biến CSS . Thay vì thay đổi lớp table-hover mặc định, hãy tạo một lớp mới ( Anotherhover ) và áp dụng nó cho bảng mà bạn cần hiệu ứng này. Lưu câu trả lời này. 
Làm cách nào để thêm màu nền trong Bootstrap?
Chúng ta có thể thêm màu nền vào div đơn giản bằng cách thêm lớp “bg-primary”, “bg-success”, “bg-danger”, “bg-info”< . , and many more as shown in the following examples.
Đọc tiếp








programming
bootstrap



Reply
6
0
 Chia sẻ