IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Trang Chủ Học Bootstrap Bootstrap 4 List Groups

Bootstrap 4 List Groups

by GokiSoft.Com - 19:29 12/10/2020 2,402 Lượt Xem

Basic List Groups

  • First item
  • Second item
  • Third item

Để tạo list group, sử dụng thẻ <ul> với class .list-group, và thẻ <li> với class .list-group-item:

Ví dụ


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


Active State

  • Active item
  • Second item
  • Third item

Sử dụng class .active để highlight item:

Ví dụ


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


List Group với Linked Items

Để tạo một list group theo kiểu link để có thể click, sử dụng thẻ <div> thay vì <ul> và <a> thay vì <li>. Add class .list-group-item-action nếu bạn muốn hiệu ứng hover:

Ví dụ


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


Disabled Item

Class .disabled thêm màu chữ nhạt hơn vào mục cần disable. Và khi sử dụng trên links, nó sẽ bỏ hiệu ứng hover đi:

Ví dụ


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


Remove Borders (Loại bỏ một số border)

  • First item
  • Second item
  • Third item
  • Fourth item

Ví dụ


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


Horizontal List Groups

Nếu bạn muốn list hiển thị theo chiều ngang thay vì dọc như mặc định, add class .list-group-horizontal cạnh .list-group:

  • First item
  • Second item
  • Third item
  • Fourth item

Ví dụ


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


Contextual Classes (Hay còn gọi là các lớp ngữ cảnh - các tiện ích này thường dùng để tạo màu)

  • Success item
  • Secondary item
  • Info item
  • Warning item
  • Danger item
  • Primary item
  • Dark item
  • Light item

Các class để đánh màu cho list-items gồm: .list-group-item-successlist-group-item-secondarylist-group-item-infolist-group-item-warning.list-group-item-danger.list-group-item-primarylist-group-item-dark và list-group-item-light,:

Ví dụ


<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>


Link items với Contextual Classes

Ví dụ


<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>


List Group với Badges

  • Inbox12
  • Ads50
  • Junk99

Ví dụ


<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge badge-primary badge-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge badge-primary badge-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge badge-primary badge-pill">99</span>
  </li>
</ul>

Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!