Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
in English

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.

Trên trang này

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.

  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
  • Một mục thứ tư
  • Và một thứ năm
html 
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</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.

  • Một mục đang hoạt động
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
  • Một mục thứ tư
  • Và một thứ năm
html 
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</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).

  • Một mặt hàng bị vô hiệu hóa
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
  • Một mục thứ tư
  • Và một thứ năm
html 
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</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 .

Mục liên kết hiện tại Mục liên kết thứ hai Mục liên kết thứ ba Mục liên kết thứ tư Một mục liên kết bị vô hiệu hóa
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</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.

html 
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</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ẻ).

  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
  • Một mục thứ tư
  • Và một thứ năm
html 
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Được đánh số

Thêm .list-group-numberedlớp bổ trợ (và tùy chọn sử dụng một <ol>phần tử) để chọn tham gia các mục nhóm danh sách được đánh số. Các số được tạo thông qua CSS (trái ngược với <ol>kiểu trình duyệt mặc định) để có vị trí tốt hơn bên trong các mục nhóm danh sách và cho phép tùy chỉnh tốt hơn.

Các số được tạo bởi counter-reseton <ol>, sau đó được tạo kiểu và đặt bằng một ::beforephần tử giả trên <li>dấu counter-incrementvà content.

  1. Một mục danh sách
  2. Một mục danh sách
  3. Một mục danh sách
html 
<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

Những thứ này cũng hoạt động tốt với nội dung tùy chỉnh.

  1. Tiêu đề phụ
    Nội dung cho mục danh sách
    14
  2. Tiêu đề phụ
    Nội dung cho mục danh sách
    14
  3. Tiêu đề phụ
    Nội dung cho mục danh sách
    14
html 
<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Nằm ngang

Thêm .list-group-horizontalđể thay đổi bố cục của các mục nhóm danh sách từ dọc sang ngang trên tất cả các điểm ngắt. Ngoài ra, hãy chọn một biến thể .list-group-horizontal-{sm|md|lg|xl|xxl}đáp ứng để tạo nhóm danh sách theo chiều ngang bắt đầu từ điểm ngắt đó min-width. Hiện tại, nhóm danh sách ngang không thể được kết hợp với nhóm danh sách phẳng.

Mẹo: Muốn các mục nhóm danh sách có chiều rộng bằng nhau khi nằm ngang? Thêm .flex-fillvào từng mục nhóm danh sách.

  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
  • Một món đồ
  • Một mặt hàng thứ hai
  • Một mặt hàng thứ ba
html 
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</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.

  • Một mục nhóm danh sách mặc định đơn giản
  • 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
html 
<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>

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.

Một mục nhóm danh sách mặc định đơn giản 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
html 
<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>
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 .visually-hiddenlớ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 .

  • Một mục danh sách14
  • Một mục danh sách thứ hai2
  • Mục danh sách thứ ba1
html 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-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

Một số nội dung trình giữ chỗ trong một đoạn văn.

Và một số bản in nhỏ.
Liệt kê tiêu đề nhóm mục
3 ngày trước

Một số nội dung trình giữ chỗ trong một đoạn văn.

Và một số bản in nhỏ bị tắt tiếng.
Liệt kê tiêu đề nhóm mục
3 ngày trước

Một số nội dung trình giữ chỗ trong một đoạn văn.

Và một số bản in nhỏ bị tắt tiếng.
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <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">Some placeholder content in a paragraph.</p>
    <small>And some small print.</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">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</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">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

Hộp kiểm và đài

Đặt các hộp kiểm và radio của Bootstrap trong các mục nhóm danh sách và tùy chỉnh nếu cần. Bạn có thể sử dụng chúng mà không cần <label>s, nhưng hãy nhớ bao gồm một aria-labelthuộc tính và giá trị cho khả năng tiếp cận.

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>
html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Bạn có thể sử dụng .stretched-linkon <label>s để làm cho toàn bộ mục của nhóm danh sách có thể nhấp được.

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận biến CSS đang phát triển của Bootstrap, các nhóm danh sách hiện sử dụng các biến CSS cục bộ trên .list-groupđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Biến Sass

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Mixin

Được sử dụng kết hợp với $theme-colorsđể tạo các lớp biến thể theo ngữ cảnh cho .list-group-items.

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Vòng

Vòng lặp tạo ra các lớp bổ trợ với list-group-item-variant()mixin.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

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

Một số nội dung trình giữ chỗ trong đoạn văn liên quan đến "Trang chủ". Và một số nội dung khác, được sử dụng ở đây chỉ để điền vào bảng tab này. Trong quá trình sản xuất, bạn rõ ràng sẽ có nhiều nội dung thực hơn ở đây. Và không chỉ là văn bản. Nó có thể là bất cứ điều gì, thực sự. Văn bản, hình ảnh, biểu mẫu.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-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.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-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>
</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ẻ):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Chúng trở lại người gọi ngay sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .

Kích hoạt nội dung của bạn dưới dạng phần tử tab.

Bạn có thể tạo một cá thể tab bằng hàm tạo, ví dụ:

const bsTab = new bootstrap.Tab('#myTab')
Phương pháp Sự mô tả
dispose Hủy tab của một phần tử.
getInstance Phương thức tĩnh cho phép bạn lấy cá thể tab được liên kết với một phần tử DOM, bạn có thể sử dụng nó như sau bootstrap.Tab.getInstance(element):.
getOrCreateInstance Phương thức static trả về một phiên bản tab được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo. bootstrap.Tab.getOrCreateInstance(element)Bạn có thể sử dụng nó như thế này :.
show Chọn tab đã cho và hiển thị ngăn liên quan của nó. Bất kỳ tab 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ó bị ẩn. Trả về trình gọi trước khi ngăn tab thực sự được hiển thị (tức là trước khi shown.bs.tabsự kiện xảy ra).

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 hiển thị mới hoạt động, tab tương tự như cho show.bs.tabsự kiện)

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

Loại sự kiện Sự mô tả
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.
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.
shown.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. 
const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})