기본 콘텐츠 로 건너뛰기 문서 탐색으로 건너뛰기
in English

목록 그룹

목록 그룹은 일련의 콘텐츠를 표시하기 위한 유연하고 강력한 구성 요소입니다. 그 안에 있는 거의 모든 콘텐츠를 지원하도록 수정하고 확장합니다.

이 페이지에서

기본 예

가장 기본적인 목록 그룹은 목록 항목과 적절한 클래스가 있는 정렬되지 않은 목록입니다. 다음 옵션을 사용하거나 필요에 따라 고유한 CSS를 사용하여 빌드하십시오.

  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 네 번째 항목
  • 그리고 다섯번째
<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>

활성 항목

에 추가 .active하여 .list-group-item현재 활성 선택을 나타냅니다.

  • 활성 항목
  • 두 번째 항목
  • 세 번째 항목
  • 네 번째 항목
  • 그리고 다섯번째
<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>

비활성화된 항목

비활성화 된 것으로 표시.disabled 하려면 에 추가하십시오 . 가 있는 일부 요소 는 클릭 이벤트(예: 링크)를 완전히 비활성화하기 위해 사용자 정의 JavaScript도 필요합니다..list-group-item.disabled

  • 비활성화된 항목
  • 두 번째 항목
  • 세 번째 항목
  • 네 번째 항목
  • 그리고 다섯번째
<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>

<a>s 또는 <button>s를 사용 하여 추가하여 호버, 비활성화 및 활성 상태 의 실행 가능한.list-group-item-action 목록 그룹 항목을 만듭니다 . 비대화형 요소(예: <li>s 또는 <div>s)로 구성된 목록 그룹이 클릭 또는 탭 어포던스를 제공하지 않도록 이러한 유사 클래스를 분리합니다.

여기 에서 표준 .btn클래스 를 사용 하지 마십시오 .

현재 링크 항목 두 번째 링크 항목 세 번째 링크 항목 네 번째 링크 항목 비활성화된 링크 항목 
<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>

s를 사용 하면 클래스 대신 속성 <button>을 사용할 수도 있습니다 . 슬프게도 s는 disabled 속성을 지원하지 않습니다.disabled.disabled<a>

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

플러시

추가 .list-group-flush하여 일부 테두리와 둥근 모서리를 제거하여 상위 컨테이너(예: 카드)에서 목록 그룹 항목을 가장자리에서 가장자리로 렌더링합니다.

  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 네 번째 항목
  • 그리고 다섯번째
<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>

번호 매기기

번호가 매겨진 목록 그룹 항목을 .list-group-numbered선택하려면 수정자 클래스를 추가 하고 선택적으로 요소를 사용합니다. 목록 그룹 항목 내부에 더 나은 배치를 위해 그리고 더 나은 사용자 정의를 허용하기 위해 <ol>CSS(기본 브라우저 스타일과 반대)를 통해 숫자가 생성됩니다 .<ol>

counter-reset에 의해 숫자가 생성되고 와 에 ​​유사 요소 <ol>로 스타일이 지정되고 배치 됩니다 .::before<li>counter-incrementcontent

  1. 목록 항목
  2. 목록 항목
  3. 목록 항목
<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>

사용자 지정 콘텐츠에서도 잘 작동합니다.

  1. 소제목
    목록 항목의 콘텐츠
    14
  2. 소제목
    목록 항목의 콘텐츠
    14
  3. 소제목
    목록 항목의 콘텐츠
    14 
<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>

수평의

.list-group-horizontal모든 중단점에서 목록 그룹 항목의 레이아웃을 수직에서 수평으로 변경하려면 추가하십시오 . 또는 반응형 변형 .list-group-horizontal-{sm|md|lg|xl|xxl}을 선택하여 해당 중단점에서 시작하여 목록 그룹을 수평으로 만듭니다 min-width. 현재 수평 목록 그룹은 플러시 목록 그룹과 결합할 수 없습니다.

ProTip: 수평일 때 동일한 너비의 목록 그룹 항목을 원하십니까? .flex-fill각 목록 그룹 항목에 추가 합니다.

  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 아이템
  • 두 번째 항목
  • 세 번째 항목
<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>

상황별 클래스

상황별 클래스를 사용하여 상태 저장 배경 및 색상으로 목록 항목의 스타일을 지정합니다.

  • 간단한 기본 목록 그룹 항목
  • 간단한 기본 목록 그룹 항목
  • 간단한 보조 목록 그룹 항목
  • 간단한 성공 목록 그룹 항목
  • 간단한 위험 목록 그룹 항목
  • 간단한 경고 목록 그룹 항목
  • 간단한 정보 목록 그룹 항목
  • 간단한 조명 목록 그룹 항목
  • 간단한 다크리스트 그룹 항목
<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>

컨텍스트 클래스도 .list-group-item-action. 이전 예에는 없는 여기에 호버 스타일이 추가되었습니다. 상태 도 지원됩니다 .active. 컨텍스트 목록 그룹 항목에 대한 활성 선택을 나타내기 위해 적용합니다.

간단한 기본 목록 그룹 항목 간단한 기본 목록 그룹 항목 간단한 보조 목록 그룹 항목 간단한 성공 목록 그룹 항목 간단한 위험 목록 그룹 항목 간단한 경고 목록 그룹 항목 간단한 정보 목록 그룹 항목 간단한 조명 목록 그룹 항목 간단한 다크 리스트 그룹 아이템 
<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>
보조 기술에 의미 전달

색상을 사용하여 의미를 추가하는 것은 시각적 표시만 제공하며 스크린 리더와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시되는 정보가 콘텐츠 자체(예: 보이는 텍스트)에서 명확하거나 .visually-hidden클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

배지 포함

목록 그룹 항목에 배지를 추가하여 일부 유틸리티 의 도움으로 읽지 않은 수, 활동 등을 표시 합니다.

  • 목록 항목 14
  • 두 번째 목록 항목 2
  • 세 번째 목록 항목 1 
<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>

맞춤 콘텐츠

flexbox 유틸리티 의 도움으로 아래와 같은 연결 목록 그룹에 대해서도 거의 모든 HTML을 내부에 추가할 수 있습니다 .

목록 그룹 항목 제목
3일 전

단락의 일부 자리 표시자 콘텐츠.

그리고 약간의 작은 글씨.
목록 그룹 항목 제목
3일 전

단락의 일부 자리 표시자 콘텐츠.

그리고 일부 음소거 된 작은 글씨.
목록 그룹 항목 제목
3일 전

단락의 일부 자리 표시자 콘텐츠.

그리고 일부 음소거 된 작은 글씨. 
<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>

체크박스와 라디오

Bootstrap의 확인란과 라디오를 목록 그룹 항목에 배치하고 필요에 따라 사용자 지정합니다. <label>s 없이도 사용할 수 있지만 aria-label접근성을 위해 속성과 값을 포함하는 것을 잊지 마십시오.

  • 첫 번째 체크박스
  • 두 번째 체크박스
  • 세 번째 체크박스
  • 네 번째 체크박스
  • 다섯 번째 체크박스
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

큰 히트 영역에 대해 <label>s 를 원하면 그렇게 할 수도 있습니다..list-group-item

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

사스

변수

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

믹신

s 에 대한 컨텍스트 변형 클래스$theme-colors 를 생성하기 위해 와 함께 사용됩니다 ..list-group-item

@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;
      }
    }
  }
}

고리

list-group-item-variant()믹스 인을 사용하여 수정자 클래스를 생성하는 루프입니다 .

// 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);
}

자바스크립트 동작

탭 JavaScript 플러그인(개별적으로 또는 컴파일된 bootstrap.js파일을 통해 포함)을 사용하여 목록 그룹을 확장하여 로컬 콘텐츠의 탭 가능한 창을 만듭니다.

"홈"과 관련된 단락의 일부 자리 표시자 콘텐츠. 그리고 이 탭 패널을 채우고 채우는 데 사용되는 추가 콘텐츠입니다. 프로덕션에서는 여기에 더 많은 실제 콘텐츠가 있을 것입니다. 그리고 텍스트뿐만이 아닙니다. 무엇이든 될 수 있습니다. 텍스트, 이미지, 양식.

"프로필"과 관련된 단락의 일부 자리 표시자 콘텐츠. 그리고 이 탭 패널을 채우고 채우는 데 사용되는 추가 콘텐츠입니다. 프로덕션에서는 여기에 더 많은 실제 콘텐츠가 있을 것입니다. 그리고 텍스트뿐만이 아닙니다. 무엇이든 될 수 있습니다. 텍스트, 이미지, 양식.

"메시지"와 관련된 단락의 일부 자리 표시자 콘텐츠. 그리고 이 탭 패널을 채우고 채우는 데 사용되는 추가 콘텐츠입니다. 프로덕션에서는 여기에 더 많은 실제 콘텐츠가 있을 것입니다. 그리고 텍스트뿐만이 아닙니다. 무엇이든 될 수 있습니다. 텍스트, 이미지, 양식.

"설정"과 관련된 단락의 일부 자리 표시자 콘텐츠. 그리고 이 탭 패널을 채우고 채우는 데 사용되는 추가 콘텐츠입니다. 프로덕션에서는 여기에 더 많은 실제 콘텐츠가 있을 것입니다. 그리고 텍스트뿐만이 아닙니다. 무엇이든 될 수 있습니다. 텍스트, 이미지, 양식.

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

데이터 속성 사용

또는 요소 를 지정하여 JavaScript를 작성하지 않고도 목록 그룹 탐색을 활성화할 수 있습니다 data-bs-toggle="list". 에서 이러한 데이터 속성을 사용합니다 .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>

자바스크립트를 통해

JavaScript를 통해 탭 가능 목록 항목 활성화(각 목록 항목을 개별적으로 활성화해야 함):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

다음과 같은 여러 방법으로 개별 목록 항목을 활성화할 수 있습니다.

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

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

페이드 효과

탭 패널을 페이드 인하 .fade려면 각각 에 추가하십시오 .tab-pane. .show첫 번째 탭 창에서도 초기 콘텐츠를 볼 수 있어야 합니다 .

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

행동 양식

constructor

목록 항목 요소 및 콘텐츠 컨테이너를 활성화합니다. 탭 에는 DOM 의 data-bs-target또는 대상 컨테이너 노드가 있어야 합니다.href

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

<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>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

보여 주다

주어진 목록 항목을 선택하고 관련 창을 표시합니다. 이전에 선택한 다른 목록 항목은 선택 취소되고 연결된 창이 숨겨집니다. 탭 창이 실제로 표시 되기 전(예: shown.bs.tab이벤트가 발생하기 전) 호출자에게 돌아갑니다.

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

처분하다

요소의 탭을 파괴합니다.

getInstance

DOM 요소와 연결된 탭 인스턴스를 가져올 수 있는 정적 메서드

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

DOM 요소와 연결된 탭 인스턴스를 가져오거나 초기화되지 않은 경우 새 탭 인스턴스를 만들 수 있는 정적 메서드

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

이벤트

새 탭을 표시할 때 이벤트는 다음 순서로 실행됩니다.

  1. hide.bs.tab(현재 활성 탭에서)
  2. show.bs.tab(표시할 탭에서)
  3. hidden.bs.tabhide.bs.tab(이전 활성 탭에서 이벤트 와 동일한 탭 )
  4. shown.bs.tabshow.bs.tab(새로 활성화된 방금 표시된 탭에서 이벤트 와 동일한 탭 )

활성화된 탭이 없으면 hide.bs.tab및 hidden.bs.tab이벤트가 실행되지 않습니다.

이벤트 유형 설명
show.bs.tab 이 이벤트는 탭 표시 시 발생하지만 새 탭이 표시되기 전에 발생합니다. event.target및 를 사용 event.relatedTarget하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
shown.bs.tab 이 이벤트는 탭이 표시된 후 탭이 표시될 때 발생합니다. event.target및 를 사용 event.relatedTarget하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
hide.bs.tab 이 이벤트는 새 탭이 표시될 때 발생합니다(따라서 이전 활성 탭이 숨겨짐). event.target및 를 사용 event.relatedTarget하여 각각 현재 활성 탭과 곧 활성화될 새 탭을 대상으로 지정합니다.
hidden.bs.tab 이 이벤트는 새 탭이 표시된 후에 시작됩니다(따라서 이전 활성 탭이 숨겨짐). event.target및 를 사용 event.relatedTarget하여 각각 이전 활성 탭과 새 활성 탭을 대상으로 지정합니다. 
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}