Nhóm danh sách trong Bootstrap 3

Trong bài viết này chúng ta sẽ tìm hiểu về các lớp trong Bootstrap 3 để mô tả các nhóm danh sách của trang web. 

Nhóm danh sách cơ bản bootstrap 3

Nhóm danh sách cơ bản nhất là danh sách không có thứ tự với các mục con trong danh sách:

Để tạo một nhóm danh sách cơ bản, hãy sử dụng phần tử <ul> với lớp .list-group và phần tử <li> với lớp .list-group-item:

Ví Dụ :

<ul class="list-group">
  <li class="list-group-item">Mục 1</li>
  <li class="list-group-item">Mục 2</li>
  <li class="list-group-item">Mục 3</li>
</ul>

Kết quả như sau:

Danh sách nhóm có huy hiệu

Bạn cũng có thể thêm huy hiệu vào nhóm danh sách. Các huy hiệu sẽ tự động được đặt ở bên phải:

Để tạo huy hiệu, hãy tạo phần tử <span> với class .badge bên trong mục danh sách:

Ví dụ:

<ul class="list-group">
  <li class="list-group-item">Bóng Đá<span class="badge">15</span></li>
  <li class="list-group-item">Thời Sự<span class="badge">5</span></li>
  <li class="list-group-item">Xã Hội<span class="badge">89</span></li>
</ul>

Kết quả:

Nhóm danh sách với các liên kết

Các mục trong nhóm danh sách cũng có thể là siêu liên kết. Thao tác này sẽ thêm màu nền xám khi di chuột.

Để tạo nhóm danh sách với các mục được liên kết, hãy sử dụng <div> thay vì <ul> và <a> thay vì <li>:

Ví dụ:

<div class="list-group">
  <a href="#" class="list-group-item">Bóng Đá</a>
  <a href="#" class="list-group-item">Bóng Chuyền</a>
  <a href="#" class="list-group-item">Bóng Ném</a>
</div>

Kết quả như sau:

Trạng thái hoạt động (Active State)

Sử dụng lớp .active để đánh dấu mục hiện tại:

<div class="list-group">
  <a href="#" class="list-group-item active">Bóng Đá</a>
  <a href="#" class="list-group-item">Bóng Chuyền</a>
  <a href="#" class="list-group-item">Bóng Ném</a>
</div>

Vô hiệu hóa phần tử (Disabled Item)

Để tắt một mục, hãy thêm lớp .disabled:

Ví dụ:

<div class="list-group">
  <a href="#" class="list-group-item">Bóng Đá</a>
  <a href="#" class="list-group-item disabled">Bóng Chuyền</a>
  <a href="#" class="list-group-item">Bóng Ném</a>
</div>

Các lớp ngữ cảnh cho danh sách:

Các lớp ngữ cảnh có thể được sử dụng để tô màu các mục trong danh sách:

Các lớp để tô màu danh sách-mục là:

• .list-group-item-success, 
• .list-group-item-info, 
• .list-group-item-warning 
• .list-group-item-risk:

Ví dụ:

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Bóng Đá</li>
  <li class="list-group-item list-group-item-info">Cầu Lông</li>
  <li class="list-group-item list-group-item-warning">Bóng chuyền</li>
  <li class="list-group-item list-group-item-danger">Bóng ném</li>
</ul>

Kết quả:

Nội dung tùy chỉnh

Bạn có thể thêm gần như bất kỳ HTML nào bên trong mục nhóm danh sách.

Bootstrap cung cấp các lớp .list-group-item-header và .list-group-item-text có thể được sử dụng như sau:

<div class="container">
    <div class="list-group">
        <h3>Danh sách chứa văn bản HTML</h3>
        <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">Bóng đá</h4>
            <p class="list-group-item-text">Bảng xếp hạng</p>
        </a>
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">Thời sự</h4>
            <p class="list-group-item-text">Bản tin thời tiết</p>
        </a>
    </div>
</div>

Lời kết:

Trên đây là cách sử dụng nhóm danh sách trong Bootstrap 3 vấn đề còn lại là sự sử dụng linh hoạt và hợp lý của các bạn. Chúc các bạn học tốt!