List Group trong Bootstrap, tác dụng và cách tạo

Để tìm hiểu cách tạo List Group trong Bootstrap như thế nào, bạn đọc cùng tham khảo tiếp bài học Bootstrap dưới đây của hiepsiit.com.

Tạo List Group Trong Bootstrap

List Group trong Bootstrap được sử dụng để hiển thị các phần tử trong danh sách trông bắt mắt hơn. Trong hầu hết các định dạng cơ bản, list group chỉ đơn giản là kiểu danh sách không theo thứ tự với lớp .list-group, hoặc các mục danh sách có lớp.list-group-item.

Ví dụ: ví dụ dưới đây minh họa cách tạo list group trong Bootstrap:

<ul class="list-group">
    <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>

Xem ví dụ

List Group Với Các Link

Chúng ta có thể sử dụng các list-group-item là hyperlink bao gồm một số thay đổi trong HTML.

Chỉ cần thay thế thẻ li bằng thẻ a và sử dụng các phần tử div làm phần tử cha thay vì ul. Ngoài ra chúng ta có thể thêm các lớp icon và badge cho list group.

Ví dụ 1: trong ví dụ dưới đây chúng ta thêm các lớp icon và badge cho list group:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">
        <i class="fa fa-home"></i> Home
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="fa fa-camera"></i> Pictures <span class="badge badge-pill badge-primary pull-right">145</span>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="fa fa-music"></i> Music <span class="badge badge-pill badge-primary pull-right">50</span>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="fa fa-film"></i> Videos <span class="badge badge-pill badge-primary pull-right">8</span>
    </a>
</div>

Xem ví dụ

Mẹo: Nếu muốn, bạn cũng có thể sử dụng list group trong Bootstrap để tạo menu điều hướng, chẳng hạn như menu hiển thị các danh mục hoặc sản phẩm trên trang web của mình.

Ngoài ra chúng ta có thể thêm các phần tử HTML khác chẳng hạn như heading (tiêu đề) và paragraph (đoạn văn bản) trong list group.

Ví dụ 2: trong ví dụ dưới đây minh họa cách thêm các phần tử heading và paragraph trong HTML:

<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>Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante.</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>Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
    </a>
</div>

Xem ví dụ 

 List Group Với Các Lớp Theo Ngữ Cảnh

Cũng giống như các thành phần khác, chúng ta có thể sử dụng các lớp theo ngữ cảnh trong list-group-item để nhấn mạnh thêm.

Ví dụ: trong ví dụ dưới đây chúng ta sử dụng các lớp theo ngữ cảnh cho List Group:

<ul class="list-group">
    <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>

Xem ví dụ

Tương tự, chúng ta có thể sử dụng các lớp theo ngữ cảnh cho list-group-item là link. Để chỉ định list-group-item đang hoạt động, chúng ta sử dụng lớp .active.

Tham khảo ví dụ dưới đây, trong ví dụ dưới đây chúng ta sử dụng các lớp theo ngữ cảnh cho list-group-item là link:

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

Xem ví dụ