Source

Danh sách nhóm

Nhóm danh sách là một thành phần linh hoạt và mạnh mẽ để hiển thị một loạt nội dung. Sửa đổi và mở rộng chúng để hỗ trợ bất kỳ nội dung nào bên trong.

Ví dụ cơ bản

Nhóm danh sách cơ bản nhất là một danh sách không có thứ tự với các mục danh sách và các lớp thích hợp. Xây dựng dựa trên nó với các tùy chọn theo sau hoặc với CSS của riêng bạn nếu cần.

  • Cras justo odio
  • Dapibus ac Operatingisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Các mặt hàng đang hoạt động

Thêm .activevào a .list-group-itemđể cho biết lựa chọn đang hoạt động hiện tại.

  • Cras justo odio
  • Dapibus ac Operatingisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Các mặt hàng bị vô hiệu hóa

Thêm .disabledvào a .list-group-itemđể làm cho nó có vẻ như bị vô hiệu hóa. Lưu ý rằng một số phần tử có .disabledcũng sẽ yêu cầu JavaScript tùy chỉnh để vô hiệu hóa hoàn toàn các sự kiện nhấp chuột của chúng (ví dụ: liên kết).

  • Cras justo odio
  • Dapibus ac Operatingisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Sử dụng <a>các s hoặc <button>s để tạo các mục trong nhóm danh sách có thể hành động với các trạng thái di chuột, tắt và hoạt động bằng cách thêm .list-group-item-action. Chúng tôi phân tách các lớp giả này để đảm bảo các nhóm danh sách được tạo từ các phần tử không tương tác (như <li>hoặc <div>các) không cung cấp khả năng chi trả bằng nhấp chuột hoặc nhấn.

Đảm bảo không sử dụng các .btnlớp tiêu chuẩn ở đây .

Cras justo odio Dapibus ac Operatingisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

Với <button>s, bạn cũng có thể sử dụng disabledthuộc tính thay vì .disabledlớp. Đáng buồn <a>là không hỗ trợ thuộc tính bị vô hiệu hóa.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

Tuôn ra

Thêm .list-group-flushđể loại bỏ một số đường viền và các góc tròn để hiển thị danh sách các mục nhóm cạnh nhau trong vùng chứa mẹ (ví dụ: thẻ).

  • Cras justo odio
  • Dapibus ac Operatingisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Các lớp theo ngữ cảnh

Sử dụng các lớp ngữ cảnh để tạo kiểu danh sách các mục với nền và màu sắc trạng thái.

  • Dapibus ac Operatingisis in
  • Một mục nhóm danh sách chính đơn giản
  • Một mục nhóm danh sách phụ đơn giản
  • Một mục nhóm danh sách thành công đơn giản
  • Một mục nhóm danh sách nguy hiểm đơn giản
  • Một mục nhóm danh sách cảnh báo đơn giản
  • Một mục nhóm danh sách thông tin đơn giản
  • Một mục nhóm danh sách đơn giản
  • Một mục nhóm danh sách tối đơn giản
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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>

Các lớp theo ngữ cảnh cũng hoạt động với .list-group-item-action. Lưu ý rằng việc bổ sung các kiểu di chuột ở đây không có trong ví dụ trước. Cũng được hỗ trợ là .activenhà nước; áp dụng nó để chỉ ra một lựa chọn đang hoạt động trên một mục nhóm danh sách theo ngữ cảnh.

Dapibus ac Operatingisis in Một mục nhóm danh sách chính đơn giản Một mục nhóm danh sách phụ đơn giản Một mục nhóm danh sách thành công đơn giản Một mục nhóm danh sách nguy hiểm đơn giản Một mục nhóm danh sách cảnh báo đơn giản Một mục nhóm danh sách thông tin đơn giản Một mục nhóm danh sách đơn giản Một mục nhóm danh sách tối đơn giản 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</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>
Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .sr-onlylớp.

Có huy hiệu

Thêm huy hiệu vào bất kỳ mục nhóm danh sách nào để hiển thị số lượng chưa đọc, hoạt động và hơn thế nữa với sự trợ giúp của một số tiện ích .

  • Cras justo odio14
  • Dapibus ac Operatingisis in2
  • Morbi leo risus1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Nội dung tùy chỉnh

Thêm gần như bất kỳ HTML nào bên trong, ngay cả đối với các nhóm danh sách được liên kết như bên dưới, với sự trợ giúp của các tiện ích flexbox .

Liệt kê tiêu đề nhóm mục
3 ngày trước

Donec id elit non mi porta gravida tại eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Liệt kê tiêu đề nhóm mục
3 ngày trước

Donec id elit non mi porta gravida tại eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Liệt kê tiêu đề nhóm mục
3 ngày trước

Donec id elit non mi porta gravida tại eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

Hành vi JavaScript

Sử dụng plugin JavaScript tab — bao gồm nó riêng lẻ hoặc thông qua bootstrap.jstệp đã biên dịch — để mở rộng nhóm danh sách của chúng tôi nhằm tạo các ngăn có thể tab của nội dung cục bộ.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing tập thể dục fugiat tempor. Voluptate đào ngũ ngồi sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reploynderit occaecat nisi ad non minim tempor sunt voluptate consectetur tập thể dục id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Hoạt ảnh quảng cáo Lorem aliqua trong cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Sử dụng thuộc tính dữ liệu

Bạn có thể kích hoạt điều hướng nhóm danh sách mà không cần viết bất kỳ JavaScript nào bằng cách chỉ định data-toggle="list"hoặc trên một phần tử. Sử dụng các thuộc tính dữ liệu này trên .list-group-item.

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

Qua JavaScript

Bật mục danh sách có thể tab qua JavaScript (mỗi mục danh sách cần được kích hoạt riêng lẻ):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Bạn có thể kích hoạt từng mục danh sách theo một số cách:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

Hiệu ứng mờ dần

Để làm cho bảng tab mờ dần, hãy thêm .fadevào từng tab .tab-pane. Ngăn tab đầu tiên cũng phải .showhiển thị nội dung ban đầu.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

Phương pháp

tab $ ().

Kích hoạt phần tử mục danh sách và vùng chứa nội dung. Tab phải có một data-targethoặc một hrefnhắm mục tiêu một nút vùng chứa trong DOM.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab ('show')

Chọn mục danh sách đã cho và hiển thị ngăn liên quan của nó. Bất kỳ mục danh sách nào khác đã được chọn trước đó sẽ trở thành không được chọn và ngăn liên kết của nó sẽ bị ẩn. Trả về trình gọi trước khi ngăn tab thực sự được hiển thị (ví dụ: trước khi shown.bs.tabsự kiện xảy ra).

$('#someListItem').tab('show')

Sự kiện

Khi hiển thị một tab mới, các sự kiện sẽ kích hoạt theo thứ tự sau:

  1. hide.bs.tab(trên tab hoạt động hiện tại)
  2. show.bs.tab(trên tab được hiển thị)
  3. hidden.bs.tab(trên tab hoạt động trước đó, tab tương tự như cho hide.bs.tabsự kiện)
  4. shown.bs.tab(trên tab vừa được hiển thị mới hoạt động, tab tương tự như đối với show.bs.tabsự kiện)

Nếu không có tab nào hoạt động, sự kiện hide.bs.tabvà hidden.bs.tabsẽ không được kích hoạt.

Loại sự kiện Sự mô tả
show.bs.tab Sự kiện này kích hoạt trên chương trình tab, nhưng trước khi tab mới được hiển thị. Sử dụng event.targetvà event.relatedTargetđể nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng.
show.bs.tab Sự kiện này kích hoạt trên tab hiển thị sau khi tab được hiển thị. Sử dụng event.targetvà event.relatedTargetđể nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng.
hide.bs.tab Sự kiện này kích hoạt khi một tab mới được hiển thị (và do đó tab đang hoạt động trước đó sẽ bị ẩn). Sử dụng event.targetvà event.relatedTargetđể nhắm mục tiêu tab đang hoạt động hiện tại và tab sắp hoạt động mới, tương ứng.
hidden.bs.tab Sự kiện này kích hoạt sau khi một tab mới được hiển thị (và do đó tab hoạt động trước đó bị ẩn). Sử dụng event.targetvà event.relatedTargetđể nhắm mục tiêu tab hoạt động trước đó và tab hoạt động mới, tương ứng. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})