Bootstrap - List Groups Demo

Xin chào các bạn nhà phát triển web đang học hỏi! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của các nhóm danh sách Bootstrap. Như một người giáo viên máy tính gần gũi, tôi rất háo hức dẫn dắt các bạn trên hành trình này. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu cuộc phiêu lưu lập trình này nhé!

什么是 List Group?

Trước khi chúng ta đi vào chi tiết, hãy bắt đầu từ cơ bản. Một nhóm danh sách là một thành phần linh hoạt và mạnh mẽ trong Bootstrap để hiển thị một loạt nội dung. Hãy nghĩ về nó như một cách thời trang để trình bày các danh sách các mục, bất kể chúng là văn bản đơn giản, liên kết hay thậm chí là nội dung tùy chỉnh. Nó giống như việc cho danh sách cũ kỹ của bạn một cuộc đại tu thời trang!

Tại sao sử dụng List Groups?

Các nhóm danh sách rất linh hoạt. Chúng có thể được sử dụng để:

• Hiển thị các danh sách đơn giản
• Tạo menu điều hướng
• Hiển thị thông báo người dùng
• Trình bày nội dung một cách có cấu trúc

Bây giờ chúng ta đã biết nhóm danh sách là gì và tại sao chúng tuyệt vời, hãy cùng gấp tay vào và bắt đầu lập mã!

Grup Danh sách Cơ bản

Hãy bắt đầu với một ví dụ về nhóm danh sách đơn giản:

<ul class="list-group">
<li class="list-group-item">Mục đầu tiên</li>
<li class="list-group-item">Mục thứ hai</li>
<li class="list-group-item">Mục thứ ba</li>
</ul>

Trong ví dụ này, chúng ta sử dụng một danh sách không có thứ tự (<ul>) với lớp list-group. Mỗi mục danh sách (<li>) có lớp list-group-item. Điều này tạo ra một danh sách sạch sẽ, có viền và các mục cách đều.

Mục Active

Đôi khi, bạn muốn làm nổi bật một mục cụ thể trong danh sách của mình. Bootstrap làm điều này rất dễ dàng với lớp active:

<ul class="list-group">
<li class="list-group-item active">Mục hoạt động</li>
<li class="list-group-item">Mục thứ hai</li>
<li class="list-group-item">Mục thứ ba</li>
</ul>

Lớp active sẽ thay đổi màu nền của mục, giúp nó nổi bật hơn. Nó giống như việc cho mục đó một ánh sángspotlight!

Mục Disabled

Nếu bạn muốn hiển thị một mục nhưng làm cho nó không thể nhấp, đó là lúc lớp disabled phát huy tác dụng:

<ul class="list-group">
<li class="list-group-item">Mục đầu tiên</li>
<li class="list-group-item disabled">Mục bị vô hiệu hóa</li>
<li class="list-group-item">Mục thứ ba</li>
</ul>

Mục disabled sẽ xuất hiện màu xám, cho thấy rằng nó không tương tác. Nó giống như đặt một biển báo "Không chạm" vào mục đó.

Grup Danh sách với Liên kết

Các nhóm danh sách không chỉ dành cho danh sách tĩnh. Bạn có thể chuyển chúng thành các menu điều hướng nhấp được bằng cách sử dụng thẻ <a> thay vì <li>:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Trang chủ</a>
<a href="#" class="list-group-item list-group-item-action">Hồ sơ</a>
<a href="#" class="list-group-item list-group-item-action">Tin nhắn</a>
</div>

Ở đây, chúng ta sử dụng thẻ <a> với các lớp list-group-item và list-group-item-action. Lớp list-group-item-action thêm các trạng thái hover và active cho các liên kết.

Grup Danh sách Flush

Muốn loại bỏ các viền ngoài và góc tròn? Sử dụng lớp list-group-flush:

<ul class="list-group list-group-flush">
<li class="list-group-item">Mục đầu tiên</li>
<li class="list-group-item">Mục thứ hai</li>
<li class="list-group-item">Mục thứ ba</li>
</ul>

Điều này tạo ra một danh sách sạch sẽ, không viền và có thể hòa hợp mượt mà với các yếu tố khác trên trang của bạn.

Grup Danh sách Ngang

Các nhóm danh sách cũng có thể được hiển thị theo chiều ngang. Điều này rất tuyệt vời cho việc tạo giao diện tab alike:

<ul class="list-group list-group-horizontal">
<li class="list-group-item">Mục đầu tiên</li>
<li class="list-group-item">Mục thứ hai</li>
<li class="list-group-item">Mục thứ ba</li>
</ul>

Lớp list-group-horizontal chuyển đổi danh sách dọc thành danh sách ngang. Nó giống như dạy danh sách của bạn làm điệu limbo - bạn có thể đi thấp đến mức nào?

Lớp Kontekstual

Bootstrap cung cấp các lớp kontekstual để thêm màu sắc cho các mục danh sách, giúp truyền tải ý nghĩa:

<ul class="list-group">
<li class="list-group-item">Mục mặc định</li>
<li class="list-group-item list-group-item-primary">Mục chủ yếu</li>
<li class="list-group-item list-group-item-secondary">Mục phụ</li>
<li class="list-group-item list-group-item-success">Mục thành công</li>
<li class="list-group-item list-group-item-danger">Mục nguy hiểm</li>
<li class="list-group-item list-group-item-warning">Mục cảnh báo</li>
<li class="list-group-item list-group-item-info">Mục thông tin</li>
<li class="list-group-item list-group-item-light">Mục sáng</li>
<li class="list-group-item list-group-item-dark">Mục tối</li>
</ul>

Các lớp kontekstual thêm một chút màu sắc cho các mục danh sách, làm chúng trở nên hấp dẫn và thông tin hơn.

Nội dung Tùy chỉnh

Các nhóm danh sách có thể chứa hơn chỉ văn bản. Bạn có thể thêm nội dung tùy chỉnh để tạo các mục danh sách phức tạp hơn:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Tiêu đề mục danh sách</h5>
<small>3 ngày trước</small>
</div>
<p class="mb-1">Một đoạn văn bản giữ chỗ.</p>
<small>And some small print.</small>
</a>
</div>

Ví dụ này cho thấy cách bạn có thể tạo một mục danh sách với tiêu đề, đoạn văn bản và văn bản nhỏ. Nó giống như biến các mục danh sách của bạn thành các bài viết mini!

Huy hiệu trong Grup Danh sách

Bạn cũng có thể thêm huy hiệu vào các mục danh sách để hiển thị thông tin bổ sung:

<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Hộp thư đến
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Thư rác
<span class="badge bg-warning rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Đã gửi
<span class="badge bg-secondary rounded-pill">99+</span>
</li>
</ul>

Điều này tạo ra một danh sách với huy hiệu ở bên phải, rất thích hợp để hiển thị số lượng hoặc chỉ số trạng thái.

Kết luận

Và thế là chúng ta đã cùng nhau hành trình qua thế giới của các nhóm danh sách Bootstrap, từ danh sách đơn giản đến nội dung phức tạp. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các ví dụ này và tạo ra các nhóm danh sách riêng của bạn.

Các nhóm danh sách giống như những cây dao Thụy Sĩ của thiết kế web - linh hoạt, hữu ích và luôn tiện lợi để có trong bộ công cụ của bạn. Vậy hãy đi tiếp và liệt kê đi! Ai biết được? Bạn có thể trở thành Michelangelo của các nhóm danh sách!

Chúc các bạn lập mã vui vẻ, và hy vọng danh sách của bạn luôn được nhóm một cách hoàn hảo!

Credits: Image by storyset