Bootstrap List Group

Bootstrap List Group

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần nhóm danh sách Bootstrap (Bootstrap List Group).

Tạo nhóm danh sách với Bootstrap

Nhóm danh sách (list group) là thành phần rất hữu ích và linh hoạt để hiển thị danh sách các phần tử một cách đẹp mắt. Ở dạng cơ bản nhất, một nhóm danh sách chỉ đơn giản là một danh sách không có thứ tự với lớp .list-group, các phần tử của danh sách có lớp .list-group-item.

<ul class="list-group w-50">
    <li class="list-group-item">Pictures</li>
    <li class="list-group-item">Documents</li>        
    <li class="list-group-item">Music</li>
    <li class="list-group-item">Videos</li>
</ul>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo nhóm danh sách với Bootstrap

Mẹo: Nhóm danh sách có độ rộng 100% theo mặc định. Để đặt chiều rộng của chúng một cách rõ ràng, bạn có thể sử dụng các lớp tiện ích chiều rộng của Bootstrap (ví dụ w-25, w-50v.v.) hoặc đặt chúng bên trong các cột lưới.

Vô hiệu hóa và kích hoạt các phần tử của danh sách

Bạn có thể chỉ cần thêm lớp .active vào .list-group-item để cho biết lựa chọn đang được kích hoạt hiện tại. Tương tự, bạn có thể thêm lớp .disabled vào .list-group-item để làm cho nó trông giống như bị vô hiệu hóa.

<ul class="list-group w-50">
    <li class="list-group-item active">Pictures</li>
    <li class="list-group-item">Documents</li>        
    <li class="list-group-item">Music</li>
    <li class="list-group-item disabled">Videos</li>
</ul>

Kết quả của ví dụ trên sẽ giống như sau:

Vô hiệu hóa và kích hoạt các phần tử của danh sách

Mẹo: Trong trường hợp nhóm danh sách có các mục được liên kết , lớp .disabled chỉ làm cho liên kết trông giống như bị vô hiệu hóa, nhưng liên kết vẫn có thể nhấp được. Để thực sự vô hiệu hóa các liên kết, bạn cần xóa thuộc tính href của anchor bằng JavaScript hoặc thủ công.

Loại bỏ đường viền của nhóm danh sách

Bạn có thể tùy chọn thêm lớp .list-group-flush vào phần tử .list-group để loại bỏ các đường viền bên ngoài và các góc tròn để tạo các nhóm danh sách cạnh nhau với vùng chứa mẹ của chúng.

Hãy xem ví dụ sau để hiểu cách nó thực sự hoạt động:

<ul class="list-group list-group-flush w-50">
    <li class="list-group-item">Pictures</li>
    <li class="list-group-item">Documents</li>        
    <li class="list-group-item">Music</li>
    <li class="list-group-item">Videos</li>
</ul>

Kết quả của ví dụ trên sẽ giống như sau:

Loại bỏ đường viền của nhóm danh sách

Tạo nhóm danh sách được đánh số

Bạn cũng có thể tạo nhóm danh sách trong đó các mục được đánh số bằng cách chỉ cần thêm lớp bổ trợ .list-group-numbered vào phần tử .list-group, như sau:

<ol class="list-group list-group-numbered w-50">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
</ol>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo nhóm danh sách được đánh số

Lưu ý: Các số được tạo thông qua CSS (trái ngược với kiểu trình duyệt mặc định của phần tử <ol>) để có vị trí tốt hơn bên trong các phần tử của nhóm danh sách và cho phép tùy chỉnh tốt hơn. Xem thuộc tính CSS counter-resetcounter-increment để tìm hiểu thêm về nó.

Danh sách Checkbox và Radio

Bạn cũng có thể đặt các checkbox và các nút radio tùy chỉnh của Bootstrap trong các phần tử của nhóm danh sách.

Ví dụ sau sẽ tạo một nhóm danh sách với các checkbox tùy chỉnh:

<div class="list-group w-50">
    <label class="list-group-item">
        <input type="checkbox" class="form-check-input me-1" name="hobbies"> Music
    </label>
    <label class="list-group-item">
        <input type="checkbox" class="form-check-input me-1" name="hobbies"> Travel & Adventure
    </label>
    <label class="list-group-item">
        <input type="checkbox" class="form-check-input me-1" name="hobbies"> Reading
    </label>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Danh sách Checkbox và Radio

Tương tự, bạn có thể đặt các nút radio tùy chỉnh trong các phần tử của nhóm danh sách, như sau:

<div class="list-group w-50">
    <label class="list-group-item">
        <input type="radio" class="form-check-input me-1" name="gender"> Male
    </label>
    <label class="list-group-item">
        <input type="radio" class="form-check-input me-1" name="gender"> Female
    </label>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Danh sách Checkbox và Radio

Bạn sẽ tìm hiểu về các checkbox và các nút radio tùy chỉnh trong chương Bootstrap form tùy chỉnh .

Nhóm danh sách với các phần tử được liên kết

Bạn cũng có thể liên kết các phần tử trong nhóm danh sách với một chút thay đổi trong mã HTML.

Chỉ cần thay thế thẻ <li> bằng thẻ <a> và sử dụng phần tử <div> làm phần tử cha thay vì phần tử <ul>. Bạn cũng có thể thêm các biểu tượng và huy hiệu vào nhóm danh sách này để làm cho nó trang nhã hơn. Đây là một ví dụ:

<div class="list-group w-50">
    <a href="#" class="list-group-item list-group-item-action active">
        <i class="bi-house-fill"></i> Home
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="bi-camera-fill"></i> Pictures
        <span class="badge rounded-pill bg-primary float-end">145</span>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="bi-music-note-beamed"></i> Music
        <span class="badge rounded-pill bg-primary float-end">50</span>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="bi-film"></i> Videos
        <span class="badge rounded-pill bg-primary float-end">8</span>
    </a>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Nhóm danh sách với các phần tử được liên kết

Mẹo: Bạn có thể sử dụng thành phần Bootstrap List Group để tạo menu sidebar navigation, ví dụ: hiển thị danh sách sản phẩm hoặc danh mục trên trang web của bạn.

Nhóm danh sách với nội dung tùy chỉnh

Bạn cũng có thể thêm gần như bất kỳ mã HTML nào trong các nhóm danh sách với sự trợ giúp của các tiện ích flexbox.

Đây là một ví dụ về nhóm danh sách được liên kết với các tiêu đề và đoạn văn.

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h4>Asteroid detected near earth</h4>
            <small>1 days ago</small>
        </div>        
        <p>Researchers have detected an asteroid of the size of a football field near earth. This asteroid does not pose any threat to the planet, but it is difficult to be tracked.</p>
    </a>
    <a href="#" class="list-group-item list-group-item-action active">
        <div class="d-flex w-100 justify-content-between">
            <h4>Scientists found massive black hole</h4>
            <small>2 days ago</small>
        </div>
        <p>Scientists have found an ultra-bright, supermassive black hole at the center of a distant galaxy, whose mass is about a million times that of our Sun.</p>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h4>NASA launches solar probe</h4>
            <small>3 days ago</small>
        </div>        
        <p>NASA launched a Parker space probe in 2018 with the mission of making observations of the outer corona of the Sun. It is the first-ever mission to "touch" the Sun.</p>
    </a>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Nhóm danh sách với nội dung tùy chỉnh

Danh sách nhóm với các trạng thái theo ngữ cảnh

Giống như hầu hết các thành phần khác, bạn cũng có thể sử dụng các lớp theo ngữ cảnh trên các mục của nhóm danh sách để nhấn mạnh thêm vào chúng. Đây là một ví dụ:

<ul class="list-group w-50">
    <li class="list-group-item">A simple default list group item</li>
    <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
    <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
    <li class="list-group-item list-group-item-success">A simple success list group item</li>
    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
    <li class="list-group-item list-group-item-info">A simple info list group item</li>
    <li class="list-group-item list-group-item-light">A simple light list group item</li>
    <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Kết quả của ví dụ trên sẽ giống như sau:

Danh sách nhóm với các trạng thái theo ngữ cảnh

Tương tự, bạn có thể sử dụng các lớp ngữ cảnh này cho các mục của nhóm danh sách liên kết. Bạn cũng có thể sử dụng lớp .active để chỉ định mục của nhóm danh sách đang được kích hoạt. Đây là một ví dụ:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Vui lòng xem chương Bootstrap Tab để tìm hiểu cách tạo Tab dọc động bằng cách sử dụng thành phần nhóm danh sách Bootstrap mà không cần sử dụng bất kỳ mã JavaScript nào.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *