Tự học Bootstrap - Cơ bản - bài 16 – Các nhóm danh sách

Các nhóm danh sách cơ bản

Nhóm danh sách cơ bản nhất là danh sách k có thứ tự với các đề mục.

Để tạo ra 01 danh sách cơ bản, dùng thẻ <ul> với lớp .list-group, và thẻ <li> với lớp .list-group-item

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

---

Danh sách với nhãn số

Bạn cũng có thể thêm nhãn số vào 01 danh sách. Nhãn số sẽ xuất hiện bên phải danh sách.

Để tạo nhãn số , tạo 01 thẻ <span> với lớp .badge bên trong thẻ <li>

<ul class="list-group">
  <li class="list-group-item">New <span class="badge">12</span></li>
  <li class="list-group-item">Deleted <span class="badge">5</span></li>
  <li class="list-group-item">Warnings <span class="badge">3</span></li> </ul>

---

Danh sách với các liên kết With Linked Items

Các đề mục trong danh sách cũng có thể là siêu liên kết. Lớp này sẽ thêm 01 nền xám khi rê chuột lên 01 mục.

Để tạo 01 danh sách nhóm với các liên kết , ta sử dụng thẻ <div>  thay vì thẻ <ul> và thẻ <a> thay vì thẻ <li>

Ví dụ:

<div class="list-group">
  <a href="#" class="list-group-item">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

---

Active State

Sử dụng lớp .active để tô sáng mục đang chọn.

Ví dụ:

<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

---

Mục bị vô hiệu

Để vô hiệu hoác 01 mục trong danh sách ta thêm lớp .disabled

Ví dụ:

<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

---

Các lớp ngữ cảnh

Các lớp ngữ cảnh có thể dùng để tô màu danh sách đề mục.

Các lớp dùng cho danh sách có tô màu là: .list-group-item-success, list-group-item-info, list-group-item-warning, và .list-group-item-danger:

Ví dụ:

<ul class="list-group">
  <li class="list-group-item list-group-item-success">First item</li>
  <li class="list-group-item list-group-item-info">Second item</li>
  <li class="list-group-item list-group-item-warning">Third item</li>
  <li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>

---

Tùy biến nội dung

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

Bootstrap cung cấp các lớp .list-group-item-heading và .list-group-item-text

Ví dụ:

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">First List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
</div>

Lophocvitinh.COM***Tự học Bootstrap -Phần cơ... bởi minh-nguyen48