Danh sách thành phần Bootstrap

Nhóm danh sách là một thành phần mạnh mẽ và linh hoạt được tìm thấy trong Bootstrap 4. Thành phần này được sử dụng để hiển thị nội dung theo chuỗi hoặc 'danh sách'. Các mục nhóm danh sách có thể được thay đổi và mở rộng để hỗ trợ hầu hết mọi loại nội dung bên trong với một số tùy chọn có sẵn để tùy chỉnh trong chính danh sách đó. Các nhóm danh sách này cũng có thể được sử dụng để điều hướng bằng cách sử dụng lớp công cụ sửa đổi phù hợp

Trong Bootstrap 4, nhóm danh sách là một thành phần tạo kiểu cho các danh sách không có thứ tự theo một cách cụ thể vì nó mở đường cho việc tạo nội dung tùy chỉnh trong các danh sách phức tạp mà không phải lo lắng về vấn đề trình bày (vì ngôn ngữ này tự xử lý vấn đề đó

Các tính năng của nhóm Danh sách Bootstrap

Đưa ra dưới đây là các tính năng có sẵn trong thành phần nhóm danh sách trong Bootstrap 4

• Danh sách không có thứ tự. Loại cơ bản nhất của nhóm danh sách mà bạn có thể tạo trong Bootstrap 4 là một danh sách không có thứ tự có một loạt các mục với các lớp phù hợp. Bạn có thể xây dựng dựa trên nó với các tùy chọn khác mà

có sẵn trong thành phần

• Mục hoạt động. Bạn có thể đánh dấu lựa chọn đang hoạt động hiện tại bằng cách thêm lệnh

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

6 vào một

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

0. Điều này hữu ích khi bạn muốn tạo danh sách các mục có thể nhấp được

• Các mục bị vô hiệu hóa. Bạn cũng có thể bỏ tô sáng một mục trong danh sách để làm cho mục đó có vẻ như đã bị vô hiệu hóa. Bạn chỉ cần thêm tiện ích mở rộng

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

1 vào

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

0 để làm như vậy

• Liên kết và Nút. Với sự trợ giúp của thẻ nút, bạn có thể dễ dàng tạo một mục có thể thao tác trong nhóm danh sách, nghĩa là bạn sẽ có thể thêm trạng thái di chuột, hoạt động và vô hiệu hóa cho các mục này thông qua việc sử dụng tùy chọn

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

3. Bạn có thể tách các lớp giả này khỏi các lớp còn lại để đảm bảo rằng các phần tử không tương tác trong mã của bạn, chẳng hạn như

-s hoặc

-s cũng không thể nhấp hoặc có thể thực hiện được. Bạn không nên sử dụng các lớp nút tiêu chuẩn mà tôi. e.

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

4 đây

• Các lớp theo ngữ cảnh. Đây là một tính năng tiện lợi khác là một phần của thành phần nhóm danh sách cho phép bạn tạo kiểu cho từng mục danh sách bằng màu và nền mô tả. Chúng đặc biệt hữu ích để làm nổi bật các mục cụ thể hoặc phân loại chúng theo mã màu.

• Danh hiệu. Bạn cũng có thể thêm huy hiệu vào một mục danh sách để hiển thị số lượng chưa đọc, hoạt động trên mục đó và bật các tính năng tương tác khác thông qua việc sử dụng một số tiện ích khác

Nói chung, nhóm danh sách là một thành phần hữu ích và mạnh mẽ trong Bootstrap 4 cho phép bạn tạo một danh sách không có thứ tự có tổ chức, tương tác và phản hồi nhanh hơn mà không ảnh hưởng đến giao diện hoặc bố cục của chính các mục trong danh sách

Chúng ta hãy xem xét một vài trường hợp

ví dụ tiêu chuẩn

Dễ dàng nhóm danh sách cần thiết nhất là một danh sách không có thứ tự cùng với các đối tượng danh sách và các lớp thích hợp. Xây dựng trên đó có các tính năng tiếp theo hoặc thậm chí với CSS cụ thể của bạn theo yêu cầu

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

yếu tố hoạt động

Đặt một

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

6 đến một

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

0 để cho biết lựa chọn đang hoạt động hiện có

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

yếu tố bị vô hiệu hóa

Bao gồm

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

1 đến

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

0 để làm cho nó có vẻ như bị vô hiệu hóa. Hãy nhớ rằng một số tính năng cũng sẽ yêu cầu JavaScript tùy chỉnh để loại bỏ hoàn toàn các sự kiện đã chọn của chúng (e. g. , siêu liên kết)

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

Liên kết url và các tab

Sử dụng

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

9-s hoặc thậm chí -s để tạo các phần nhóm danh sách khả thi có trạng thái di chuột, vô hiệu hóa và hoạt động thông qua việc thêm vào

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

3. Chúng tôi tách các lớp giả này để tạo các nhóm danh sách nhất định được tạo từ các phần tử không tương tác (như

-s hoặc thậm chí

-s) không nhấp vào hoặc thậm chí chạm vào khả năng chi trả

Đảm bảo không sử dụng các lớp

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

4 tiêu chuẩn tại đây

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

4

Qua

-s, bạn chắc chắn có thể sử dụng thêm tính năng

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

2 thay vì

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

1 Điều đáng buồn là,

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

9-s không hỗ trợ tính năng bị vô hiệu hóa.

______18

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

5

các lớp theo ngữ cảnh

Sử dụng các lớp theo ngữ cảnh để chế độ các phần danh sách bằng cách sử dụng nền có trạng thái cùng với tùy chọn màu

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

0

Các lớp theo ngữ cảnh thực hiện công việc như nhau với

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

3. Xem xét việc gia nhập các thiết kế di chuột ở đây không có trong tình huống cuối cùng. Ngoài ra,

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

6 được hỗ trợ;

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

2

Tiết lộ ý nghĩa hướng tới đổi mới công nghệ hỗ trợ

Làm việc với màu sắc để cung cấp ý nghĩa chỉ đơn giản là đưa ra một tín hiệu trực quan, điều đó chắc chắn sẽ không được chia sẻ với những người dùng đổi mới công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng dữ liệu được đánh dấu qua màu rõ ràng với chính nội dung (e. g. tin nhắn văn bản có thể phát hiện được), hoặc được cung cấp thông qua các phương pháp khác, giống như văn bản bổ sung được bao phủ bởi lớp

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

8

Có phù hiệu

Đặt huy hiệu cho bất kỳ loại thành phần nhóm danh sách nào để hiển thị số tiền, hoạt động chưa đọc và hơn thế nữa với sự trợ giúp của một số tiện ích. Xem xét lớp tiện ích justify-content-between và vị trí của huy hiệu

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

4

vật liệu tùy chỉnh

Thực tế, thêm vào bất kỳ loại HTML nào bên trong và thậm chí đối với nhóm danh sách được liên kết như nhóm bên dưới, với tiện ích flexbox

  
Cras justo odio
  
Dapibus ac facilisis in
  
Morbi leo risus
  
Porta ac consectetur ac
  
Vestibulum at eros

5

kết luận

Nhìn chung, nhóm danh sách là một thành phần mạnh mẽ và hữu ích trong Bootstrap 4, cho phép bạn có được một danh sách không theo thứ tự được lên kế hoạch, tương tác và phản hồi nhanh hơn mà không ảnh hưởng đến sự hấp dẫn trực quan hoặc bố cục của chính các phần danh sách

Các thành phần Bootstrap là gì?

Bootstrap có phải là thư viện thành phần không?

Nhóm danh sách trong Bootstrap là gì?

Làm cách nào để sử dụng các thành phần Bootstrap trong HTML?