Bootstrap - Nhóm Danh sách: Hướng dẫn Toàn diện Cho Người Mới Bắt Đầu

Xin chào các bạn đang học lập trình web! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị này về Nhóm Danh sách của Bootstrap. Với hơn một thập kỷ dạy khoa học máy tính, tôi có thể đảm bảo rằng việc thành thạo thành phần này sẽ là một bước đột phá trong bộ công cụ thiết kế web của bạn. Hãy cùng bắt đầu nào!

Nhóm Danh sách là gì?

Trước khi chúng ta bắt đầu, hãy hiểu xem Nhóm Danh sách là gì. Hãy tưởng tượng bạn đang làm một ứng dụng danh sách công việc. Bạn muốn các nhiệm vụ của mình được tổ chức ngăn nắp, phải không? Đó chính xác là điều mà Nhóm Danh sách làm trong thiết kế web. Chúng là một cách linh hoạt và mạnh mẽ để hiển thị một loạt nội dung. Dù là danh sách mua sắm đơn giản hay menu điều hướng phức tạp, Nhóm Danh sách đều có thể đáp ứng!

Các mục cơ bản

Hãy bắt đầu từ những điều cơ bản. Tạo một Nhóm Danh sách đơn giản dễ như باز. Dưới đây là cách bạn làm:

<ul class="list-group">
<li class="list-group-item">Một mục</li>
<li class="list-group-item">Một mục thứ hai</li>
<li class="list-group-item">Một mục thứ ba</li>
<li class="list-group-item">Một mục thứ tư</li>
<li class="list-group-item">Và một mục thứ năm</li>
</ul>

Trong ví dụ này, chúng ta sử dụng một danh sách không 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 cho chúng ta một danh sách sạch sẽ, có样式 mà không cần thêm effort!

Các mục活跃

Đôi khi, bạn muốn nổi bật một mục trong danh sách của mình. Có thể là trang hiện tại trong menu điều hướng. Đó là lúc lớp active phát huy tác dụng:

<ul class="list-group">
<li class="list-group-item active">Một mục活跃</li>
<li class="list-group-item">Một mục thứ hai</li>
<li class="list-group-item">Một mục thứ ba</li>
</ul>

Lớp active làm nổi bật mục với màu nền khác. Nó giống như đặt một ánh sáng spotlight trên mục cụ thể đó!

Các mục bị vô hiệu hóa

Nếu bạn muốn hiển thị một mục nhưng không muốn người dùng tương tác với nó? Đó là lúc lớp disabled phát huy tác dụng:

<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">Một mục bị vô hiệu hóa</li>
<li class="list-group-item">Một mục thứ hai</li>
<li class="list-group-item">Một mục thứ ba</li>
</ul>

Lớp disabled làm mục có màu xám, cho thấy nó không thể nhấp được. Nó giống như đặt một biển báo "Đừng chạm" trên mục đó!

Liên kết và Nút

Nhóm Danh sách không chỉ cho danh sách tĩnh. Bạn có thể biến các mục danh sách thành các liên kết hoặc nút nhấp được:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
Liên kết mục hiện tại
</a>
<a href="#" class="list-group-item list-group-item-action">Một liên kết mục thứ hai</a>
<a href="#" class="list-group-item list-group-item-action">Một liên kết mục thứ ba</a>
<a href="#" class="list-group-item list-group-item-action">Một liên kết mục thứ tư</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Một liên kết mục bị vô hiệu hóa</a>
</div>

Ở đây, chúng ta sử dụng thẻ <a> thay vì <li>. Lớp list-group-item-action làm cho các liên kết trông và hành xử như nút. Nó giống như biến danh sách mua sắm của bạn thành một menu các tùy chọn!

Flush

Muốn xóa bỏ các viền ngoài và góc tròn? Lớp list-group-flush sẽ giúp bạn:

<ul class="list-group list-group-flush">
<li class="list-group-item">Một mục</li>
<li class="list-group-item">Một mục thứ hai</li>
<li class="list-group-item">Một mục thứ ba</li>
<li class="list-group-item">Một mục thứ tư</li>
<li class="list-group-item">Và một mục thứ năm</li>
</ul>

Điều này cho danh sách của bạn một的外观 sạch sẽ, mạch lạc hơn. Nó hoàn hảo khi bạn muốn danh sách hòa quyện mượt mà với nội dung xung quanh.

Đánh số

Nhớ những danh sách đánh số bạn từng làm ở trường không? Bạn cũng có thể tạo chúng trong Bootstrap:

<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>

Lớp list-group-numbered tự động đánh số các mục danh sách. Nó giống như có một trợ lý đánh số danh sách công việc của bạn!

Ngang

Ai nói rằng danh sách luôn phải thẳng đứng? Với Bootstrap, bạn có thể làm chúng ngang:

<ul class="list-group list-group-horizontal">
<li class="list-group-item">Một mục</li>
<li class="list-group-item">Một mục thứ hai</li>
<li class="list-group-item">Một mục thứ ba</li>
</ul>

Điều này tạo ra một danh sách bên cạnh nhau, hoàn hảo cho các menu điều hướng hoặc hiển thị các danh mục.

Biến thể

Bootstrap cung cấp các biến thể màu khác nhau để truyền tải ý nghĩa qua màu sắc:

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

Những biến thể màu này có thể được sử dụng để chỉ ra các trạng thái hoặc ưu tiên khác nhau. Nó giống như mã hóa các nhiệm vụ của bạn dựa trên tầm quan trọng!

Với Huy hiệu

Muốn thêm thông tin bổ sung vào các mục danh sách? Huy hiệu là một cách tuyệt vời để làm điều đó:

<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Một mục danh sách
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Một mục danh sách thứ hai
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Một mục danh sách thứ ba
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>

Điều này thêm các phần tử huy hiệu nhỏ vào các mục danh sách, hoàn hảo cho việc hiển thị số lượng hoặc chỉ báo trạng thái.

Nội dung tùy chỉnh

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 ra các mục danh sách phong phú, thông tin:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<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 mẫu.</p>
<small>AndUpdate nhỏ</small>
</a>
<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 class="text-muted">3 ngày trước</small>
</div>
<p class="mb-1">Một đoạn văn bản mẫu.</p>
<small class="text-muted">AndUpdate mờ</small>
</a>
</div>

Điều này cho phép bạn tạo ra các mục danh sách phức tạp với tiêu đề, đoạn văn bản và các yếu tố khác. Nó giống như biến danh sách mua sắm đơn giản của bạn thành một catalog sản phẩm chi tiết!

Checkbox và Radio

Cuối cùng nhưng không kém phần quan trọng, bạn thậm chí có thể thêm checkbox hoặc radio button vào Nhóm Danh sách:

<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Checkbox đầu tiên
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Checkbox thứ hai
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Checkbox thứ ba
</li>
</ul>

Điều này hoàn hảo cho việc tạo danh sách tương tác, như một danh sách công việc nơi người dùng có thể đánh dấu các mục đã hoàn thành.

Kết luận

Và thế là chúng ta đã cùng nhau khám phá thế giới kỳ diệu của Nhóm Danh sách Bootstrap. Từ danh sách cơ bản đến các thành phần tương tác phức tạp, Nhóm Danh sách cung cấp một giải pháp linh hoạt và hấp dẫn để hiển thị nội dung có cấu trúc.

Nhớ rằng, chìa khóa để thành thạo các khái niệm này là thực hành. Vậy hãy tiếp tục, thử nghiệm các ví dụ này, kết hợp các tính năng khác nhau và xem bạn có thể tạo ra điều gì. Chúc các bạn may mắn!

Credits: Image by storyset