목록 그룹

// List group

목록 그룹은 일련의 콘텐츠를 보여주기 위한 유연하고 강력한 컴포넌트입니다. 그룹을 변경하거나 확장하여 모든 콘텐츠를 지원합니다.

기본 예시

가장 기본적인 목록 그룹은 목록 아이템과 적절한 클래스를 가진 순서 없는 목록입니다. 이하의 옵션을 사용해, 혹은 필요에 따라서 독자적인 CSS를 사용해 만듭니다.

An item
A second item
A third item
A fourth item
And a fifth one

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>

활성화된 항목

현재 활성화 된 선택 범위를 나타내기 위해 .list-group-item에 .active를 추가합니다.

An active item
A second item
A third item
A fourth item
And a fifth one

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>

비활성화된 항목

.list-group-item에 .disabled를 추가하면, 비활성화되어 있는 것처럼 보입니다. .disabled를 가진 요소 중에는 클릭 이벤트(링크 등)를 완전히 비활성화하기 위해 사용자 정의 JavaScript를 사용해야 합니다.

A disabled item
A second item
A third item
A fourth item
And a fifth one

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>

링크와 버튼

actionable 한 목록 그룹 아이템을 작성하려면 <a> 나 <button>을 사용하고, .list-group-item-action을 추가합니다. 비 인터랙티브한 요소(<li> 혹은 <div>와 같은)로 만들어진 목록 그룹이 클릭이나 탭 어포던스를 제공하지 않도록, 이러한 가상 클래스를 분리하고 있습니다.

여기에서는 표준의 .btn 클래스를 사용하지 않도록 주의해 주세요.

The current link item A second link item A third link item A fourth link item A disabled link item

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" aria-disabled="true">A disabled link item</a>
</div>

<button>에서는 .disabled 클래스 대신에 disabled 속성을 사용할 수도 있습니다. 유감스럽게도, <a>는 disabled 속성을 지원하지 않습니다.

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>

채우기

.list-group-flush를 추가하고, 부모 컨테이너(카드 등) 내의 목록 그룹의 아이템을 끝에서 끝까지 표시하기 위해 몇개의 라인과 둥근 모서리를 제거하도록 합니다.

An item
A second item
A third item
A fourth item
And a fifth one

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>

숫자

.list-group-numbered라는 제어자 클래스(와 옵션에서 <ol>요소를 사용하여)를 추가하여 숫자 목록 리스트 그룹을 만들 수 있습니다. 숫자는(<ol>의 브라우저 기본 스타일링이 아닌) CSS에 의해 추가되므로 목록 그룹 아이템 내에서 배치가 간단하고 재정의하기도 쉬워집니다.

숫자는 <ol>의 counter-increment에 의해 생성되며 counter-increment와 콘텐츠를 가진 <li>의 ::before 가상 요소를 사용하여 스타일링 되고 배치됩니다.

A list item
A list item
A list item

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>

이들은 사용자 정의 콘텐츠와도 잘 어울립니다.

Subheading
Content for list item
14
Subheading
Content for list item
14
Subheading
Content for list item
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 text-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 text-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 text-bg-primary rounded-pill">14</span>
  </li>
</ol>

수평

목록 그룹의 아이템 레이아웃을 모든 중단점에서 수직에서 수평으로 변경하려면 .list-group-horizontal를 추가합니다. 혹은 반응형 변수 .list-group-horizontal-{sm|md|lg|xl|xxl}를 선택하고 중단점의 min-width로 시작하는 목록 그룹을 수평으로 합니다. 현재 수평 목록 그룹을 flush 목록 그룹과 조합할 수 없습니다.

꿀팁: 목록 그룹의 아이템을 수평 방향의 동일한 너비로 하고 싶을 경우, 목록 그룹의 각 아이템에 .flex-fill을 추가합니다.

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

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>

변수

주의! list-group-item-variant() Sass 믹스인은 v5.3.0에서 지원이 중단되었습니다. 목록 그룹 항목은 이제 Sass 루프에 자체적인 CSS 변수를 가지고 있습니다.

상황별 클래스를 사용하여, 스테이트풀(stateful)한 배경색과 텍스트색으로 목록 아이템을 꾸밉니다.

A simple default list group item
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

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>

링크 및 버튼의 경우

컨텍스트 클래스는 <a> 및 <button> 요소에 대해 .list-group-item-action과도 작동합니다. 이전 예제에는 없었던 호버 스타일이 여기에 추가되었습니다. .active 상태도 지원되며, 이를 적용하여 컨텍스트 목록 그룹 항목에 활성 선택을 표시할 수 있습니다.

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

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>

접근성 팁: 색상을 사용하여 의미를 추가하면 시각적 표시만 제공되므로 화면 리더와 같은 보조 기술 사용자에게는 의미가 전달되지 않습니다. 콘텐츠 자체에서 의미가 명확하게 드러나거나(예: 충분한 색상 대비가 있는 가시 텍스트) .visually-hidden 클래스로 숨겨진 추가 텍스트 등 대체 수단을 통해 의미가 포함되었는지 확인하시기 바랍니다.

배지 포함

utilities를 사용해, 아직 읽지 않은 수나 액티비티 등을 표시하기 위한 배지를 목록 그룹의 아이템에 추가합니다.

A list item 14
A second list item 2
A third list item 1

html

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge text-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 text-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 text-bg-primary rounded-pill">1</span>
  </li>
</ul>

사용자 지정 콘텐츠

flexbox utilities의 도움을 받아 아래와 같은 링크된 목록 그룹에서도 거의 모든 HTML를 추가할 수 있습니다.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

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-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">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-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
</div>

체크박스와 라디오버튼

목록 그룹 아이템 내에 Bootstrap 체크 박스와 라디오 버튼을 배치하고 필요에 따라 재정의합니다. <label> 없이도 사용이 가능하지만 접근성을 위해 aria-label 속성과 값을 포함해 주세요.

First checkbox
Second checkbox
Third checkbox

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>

First radio
Second radio
Third radio

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>

You can use .stretched-link on <label>s to make the whole list group item clickable.

First checkbox
Second checkbox
Third checkbox

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

변수

v5.2.0에서 추가됨

Bootstrap의 진화하는 CSS 변수 접근 방식의 일환으로, 이제 목록 그룹은 향상된 실시간 사용자 정의를 위해 .list-group에서 로컬 CSS 변수를 사용합니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 사용자 정의도 계속 지원됩니다.

scss/_list-group.scss

--#{$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};

Sass 변수

scss/_variables.scss

$list-group-color:                  var(--#{$prefix}body-color);
$list-group-bg:                     var(--#{$prefix}body-bg);
$list-group-border-color:           var(--#{$prefix}border-color);
$list-group-border-width:           var(--#{$prefix}border-width);
$list-group-border-radius:          var(--#{$prefix}border-radius);

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
// fusv-disable
$list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
$list-group-item-color-scale:       40%; // Deprecated in v5.3.0
// fusv-enable

$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
$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:         var(--#{$prefix}secondary-color);
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           var(--#{$prefix}secondary-color);
$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

$list-group-action-active-color:    var(--#{$prefix}body-color);
$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);

Sass 믹스인

v5.3.0부터 지원 중단

scss/mixins/_list-group.scss

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

Sass 루프

CSS 변수를 재정의하여 수정자 클래스를 생성하는 루프입니다.

scss/_list-group.scss

// 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 in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

JavaScript 비헤이비어

탭 JavaScript 플러그인—개별적으로 혹은 컴파일된 bootstrap.js를 사용해 목록 그룹을 확장하고 로컬 콘텐츠의 탭 가능한 판넬을 작성합니다.

Home Profile Messages Settings

Some placeholder content in a paragraph relating to "Home". 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 "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>

데이터 속성 사용하기

JavaScript를 쓰지 않아도, data-bs-toggle="list"를 지정하거나 요소로 지정만 해도 목록 그룹 내비게이션을 활성화할 수 있습니다. 이들의 data 속성을 .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 사용하기

JavaScript로 탭 가능한 목록 아이템을 유효하게 합니다.(각 목록 아이템을 개별적으로 유효하게 할 필요가 있습니다):

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

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

각각의 목록 아이템을 여러 가지 방법으로 활성화 할 수 있습니다:

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

페이드 효과

탭 판넬을 페이드인 시키려면 .tab-pane에 .fade를 추가합니다. 첫번째 탭 판넬에는 첫번째 콘텐츠를 표시하기 위해서 .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>

메소드

모든 API 메서드는 비동기식이며 전환을 시작합니다. 전환이 시작되는 즉시 호출자에게 반환되지만 전환이 끝나기 전에 호출자에게 반환됩니다. 또한 전환 중인 컴포넌트에 대한 메서드 호출은 무시됩니다. JavaScript 문서에서 자세히 알아보세요.

콘텐츠를 탭 요소로 활성화합니다.

예를 들어 다음과 같이 생성자를 사용하여 탭 인스턴스를 만들 수 있습니다:

const bsTab = new bootstrap.Tab('#myTab')

메소드	설명
`dispose`	요소의 탭을 없앱니다.
`getInstance`	DOM 요소와 연관된 탭의 인스턴스를 가져오는 Static 메소드입니다.`bootstrap.Tab.getInstance(element)`처럼 사용할 수 있습니다.
`getOrCreateInstance`	Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	지정된 목록 아이템을 선택하고 관련 판넬을 표시합니다. 이전에 선택되었던 다른 목록 아이템은 선택되지 않은 상태로 돌아가고, 관련된 판넬은 숨김이 됩니다. 탭 판넬이 실제로 표시되기 전에 호출한 곳으로 돌아갑니다 (예를 들어, `shown.bs.tab` 이벤트가 발생하기 전 등).

이벤트

새로운 탭을 표시하면, 아래의 순서대로 이벤트가 발생합니다:

hide.bs.tab (현재 활성 탭)
show.bs.tab (표시되는 탭)
hidden.bs.tab (이전 활성화 탭에서 hide.bs.tab 이벤트 동일)
shown.bs.tab (새로 활성화된 지 얼마 안 된 탭으로 show.bs.tab 이벤트와 동일)

이미 활성화 된 탭이 없는 경우, hide.bs.tab과 hidden.bs.tab 이벤트는 발생하지 않습니다.

이벤트 유형	설명
`hide.bs.tab`	이 이벤트는 새로운 탭이 표시될 (따라서 이전에 활성화 한 탭이 숨겨집니다) 때 발생합니다. `event.target`과 `event.relatedTarget`을 사용하여 각각 현재 활성화된 탭과 곧 활성화 될 새로운 탭을 타깃으로 합니다.
`hidden.bs.tab`	이 이벤트는 새로운 탭이 표시된 후에 발생합니다 (따라서 이전 활성화 탭은 숨겨집니다). `event.target`과 `event.relatedTarget`을 사용하여 각각 이전 활성화 탭과 새로운 활성화 탭을 타깃으로 합니다.
`show.bs.tab`	이 이벤트는 탭 표시시 발생하는데, 새로운 탭이 표시되기 전에 발생합니다. `event.target`과 `event.relatedTarget`을 사용하여 각각 활성화된 탭과 이전의 활성화된 탭 (이용 가능한 경우)을 타깃으로 합니다.
`shown.bs.tab`	이 이벤트는 탭이 표시된 이후 탭을 표시할 때 발생합니다. `event.target`과 `event.relatedTarget`을 사용하여 각각 활성화된 탭과 이전의 활성화된 탭(이용 가능한 경우)을 타깃으로 합니다.

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