Làm cách nào để lọc bảng trong Bootstrap 5?

Do việc sử dụng rộng rãi của

  ...

8 đối với bất kỳ, sau đó mở rộng với các lớp sửa đổi tùy chọn hoặc kiểu tùy chỉnh của chúng tôi. Tất cả các kiểu bảng không được kế thừa trong Bootstrap, nghĩa là bất kỳ bảng lồng nhau nào cũng có thể được tạo kiểu độc lập với bảng gốc

Sử dụng đánh dấu bảng cơ bản nhất, đây là cách các bảng dựa trên

  ...

9 trông như thế nào trong Bootstrap

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

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

lớp

  ...

0

Bảng có dấu

hàng sọc

Sử dụng

  ...

1 để thêm sọc vằn vào bất kỳ hàng nào của bảng trong

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

Các lớp này cũng có thể được thêm vào các biến thể của bảng

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

Hàng có thể di chuột

Thêm

  ...

2 để kích hoạt trạng thái di chuột trên các hàng của bảng trong một

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

Các hàng có thể di chuột này cũng có thể được kết hợp với biến thể sọc

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

bảng hoạt động

Đánh dấu một hàng hoặc ô của bảng bằng cách thêm một lớp

  ...

3

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

3

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

3

Các biến thể và bảng có dấu hoạt động như thế nào?

Đối với các bảng có dấu (các hàng có sọc, các hàng có thể di chuột và các bảng đang hoạt động), chúng tôi đã sử dụng một số kỹ thuật để làm cho các hiệu ứng này hoạt động với tất cả các biến thể bảng của chúng tôi

• Chúng tôi bắt đầu bằng cách đặt nền của một ô trong bảng với thuộc tính tùy chỉnh

  
    ...
  

  4. Sau đó, tất cả các biến thể của bảng sẽ đặt thuộc tính tùy chỉnh đó để tô màu các ô của bảng. Bằng cách này, chúng ta sẽ không gặp rắc rối nếu các màu nửa trong suốt được sử dụng làm nền bảng
• Sau đó, chúng tôi thêm một bóng hộp bên trong trên các ô của bảng có

  
    ...
  

  5 vào lớp trên cùng của bất kỳ

  
    ...
  

  6 được chỉ định nào. Bởi vì chúng tôi sử dụng một dải rộng lớn và không bị mờ, màu sắc sẽ đơn điệu. Vì

  
    ...
  

  7 không được đặt theo mặc định nên chúng tôi không có bóng hộp mặc định
• Khi các lớp

  
    ...
  

  1,

  
    ...
  

  2 hoặc

  
    ...
  

  3 được thêm vào, lớp

  
    ...
  

  7 được đặt thành màu bán trong suốt để tô màu nền
• Đối với mỗi biến thể của bảng, chúng tôi tạo ra một màu

  
    ...
  

  7 có độ tương phản cao nhất tùy thuộc vào màu đó. Ví dụ: màu nhấn cho

  
    ...
  

  3 tối hơn trong khi

  
    ...
  

  4 có màu nhấn nhẹ hơn
• Màu văn bản và đường viền được tạo theo cùng một cách và màu của chúng được kế thừa theo mặc định

Đằng sau hậu trường nó trông như thế này

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

60

viền bảng

bảng có viền

Thêm

  ...

5 cho đường viền trên tất cả các mặt của bảng và ô

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

Tiện ích màu viền có thể được thêm vào để thay đổi màu sắc

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

Bàn không viền

Thêm

  ...

6 cho bảng không có viền

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

bàn nhỏ

Thêm

  ...

7 để làm cho bất kỳ

  ...

9 nào nhỏ gọn hơn bằng cách cắt tất cả ô

  ...

9 làm đôi

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

Căn dọc

Các ô của bảng luôn được căn dọc xuống dưới cùng. Các ô trong bảng kế thừa căn chỉnh của chúng từ

  ...

0 từ bảng Ô này kế thừa

  ...

1 từ bảng Ô này kế thừa

  ...

1 từ bảng Đây là một số văn bản giữ chỗ, nhằm mục đích chiếm khá nhiều không gian theo chiều dọc, để minh họa cách thức hoạt động của căn chỉnh theo chiều dọc trong phần trước . Ô này kế thừa

  ...

3 từ hàng của bảng Ô này kế thừa

  ...

3 từ hàng của bảng Ô này kế thừa

  ...

3 từ hàng của bảng Đây là một số văn bản giữ chỗ, nhằm mục đích chiếm khá nhiều không gian theo chiều dọc, để minh họa cách hoạt động của căn chỉnh dọc trong các ô trước đó. Ô này kế thừa

  ...

1 từ bảng Ô này kế thừa

  ...

1 từ bảng Ô này được căn chỉnh lên trên cùng. Đây là một số văn bản giữ chỗ, nhằm mục đích chiếm khá nhiều không gian theo chiều dọc, để minh họa cách căn chỉnh theo chiều dọc hoạt động trong các ô trước đó

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

67

  ...

8

  ...

9) bộ chọn trong CSS của chúng tôi. Vì chúng tôi cần nhắm mục tiêu tất cả các

  ...

0 và

  ...

1 trong

  ...

2,

  ...

3 và

  ...

4, bộ chọn của chúng tôi sẽ trông khá dài nếu không có nó. Do đó, chúng tôi sử dụng bộ chọn

  ...

5 trông khá kỳ quặc để nhắm mục tiêu tất cả các

  ...

0 và

  ...

1 của

  ...

9, nhưng không có bảng lồng nhau tiềm năng nào

Lưu ý rằng nếu bạn thêm s làm phần tử con trực tiếp của bảng, thì các phần tử đó sẽ được đặt trong phần tử theo mặc định, do đó làm cho bộ chọn của chúng ta hoạt động như dự kiến

Giải phẫu học

đầu bàn

Tương tự với bảng và bảng tối, sử dụng các lớp sửa đổi

  ...

9 hoặc

  ...

4 để làm cho s có màu xám nhạt hoặc tối

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

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

69

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

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

69

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitterFooterFooterFooterFooter

  ...

1

chú thích

Một chức năng giống như một tiêu đề cho một bảng. Nó giúp người dùng có trình đọc màn hình tìm một bảng và hiểu nội dung của bảng đó cũng như quyết định xem họ có muốn đọc bảng đó không

Danh sách người dùng#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter

  ...

2

Bạn cũng có thể đặt cái này lên trên cùng của bảng với

  ...

1

Danh sách người dùng#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

  ...

3

bảng đáp ứng

Các bảng đáp ứng cho phép các bảng được cuộn theo chiều ngang một cách dễ dàng. Làm cho bất kỳ bảng nào phản hồi nhanh trên tất cả các chế độ xem bằng cách gói một

  ...

9 với

  ...

3. Hoặc, chọn một điểm ngắt tối đa để có một bảng phản hồi tối đa bằng cách sử dụng

  ...

4

Các bảng đáp ứng sử dụng

  ...

5, 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

Luôn đáp ứng

Trên mọi điểm ngắt, hãy sử dụng

  ...

3 cho các bảng cuộn theo chiều ngang

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading1CellCellCellCellCellCellCell2CellCellCellCellCellCellCell3CellCellCellCellCellCellCell