탐색 및 탭

Bootstrap에 포함된 탐색 구성 요소를 사용하는 방법에 대한 설명서 및 예제입니다.

이 페이지에서

기본 탐색

부트스트랩에서 사용할 수 있는 탐색은 기본 .nav클래스에서 활성 및 비활성화 상태에 이르기까지 일반 마크업 및 스타일을 공유합니다. 수정자 클래스를 교체하여 각 스타일 간에 전환합니다.

기본 .nav구성 요소는 flexbox로 구축되었으며 모든 유형의 탐색 구성 요소를 구축하기 위한 강력한 기반을 제공합니다. 여기에는 일부 스타일 재정의(목록 작업용), 더 큰 히트 영역에 대한 일부 링크 패딩 및 기본 비활성화된 스타일이 포함됩니다.

기본 .nav구성 요소에는 상태가 포함되지 않습니다 .active. 다음 예제에는 주로 이 특정 클래스가 특별한 스타일을 트리거하지 않는다는 것을 보여주기 위한 클래스가 포함되어 있습니다.

활성 상태를 보조 기술에 전달하려면 현재 페이지 또는 집합의 현재 항목에 대한 값을 사용하여 aria-current속성을 사용합니다 .pagetrue

HTML

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

클래스는 전체적으로 사용되므로 마크업이 매우 유연할 수 있습니다. 항목의 순서가 중요한 경우 <ul>위와 같이 s를 사용 하거나 요소를 사용하여 고유한 항목을 굴립니다. 를 사용 하기 때문에 탐색 링크는 탐색 항목과 동일하게 작동하지만 추가 마크업은 없습니다.<ol><nav>.navdisplay: flex

HTML

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

사용 가능한 스타일

.nav수정자와 유틸리티를 사용하여 s 구성 요소 의 스타일을 변경합니다 . 필요에 따라 믹스 앤 매치하거나 직접 구성하십시오.

수평 정렬

flexbox 유틸리티 를 사용하여 탐색의 수평 정렬을 변경합니다 . 기본적으로 탐색은 왼쪽 정렬되지만 중앙 또는 오른쪽 정렬로 쉽게 변경할 수 있습니다.

중심 .justify-content-center:

HTML

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

오른쪽 정렬 .justify-content-end:

HTML

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

수직의

.flex-column유틸리티 로 플렉스 항목 방향을 변경하여 탐색을 스택하십시오 . 일부 뷰포트에는 스택해야 하지만 다른 뷰포트에는 스택해야 합니까? 반응형 버전(예: .flex-sm-column)을 사용합니다.

HTML

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

항상 그렇듯이 수직 탐색도 가능합니다 <ul>.

HTML

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

탭

위에서 기본 탐색을 가져오고 .nav-tabs클래스를 추가하여 탭 인터페이스를 생성합니다. 그것들을 사용하여 탭 JavaScript 플러그인 으로 탭 가능 영역을 만드십시오 .

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

의사

동일한 HTML을 사용하되 .nav-pills대신 다음을 사용하십시오.

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

채우기 및 정당화

.nav의 콘텐츠가 두 개의 수정자 클래스 중 하나에서 사용 가능한 전체 너비를 확장하도록 강제합니다 . .nav-item사용 가능한 모든 공간을 s 로 비례적으로 채우려면 를 사용하십시오 .nav-fill. 모든 수평 공간이 점유되지만 모든 탐색 항목의 너비가 같은 것은 아닙니다.

HTML

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

기반 탐색 을 사용하는 경우 스타일 요소 에만 필요하므로 <nav>안전하게 생략할 수 있습니다 ..nav-item.nav-link<a>

HTML

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

너비가 같은 요소의 경우 를 사용 .nav-justified합니다. 모든 수평 공간은 탐색 링크가 차지하지만 .nav-fill위와 달리 모든 탐색 항목의 너비는 동일합니다.

HTML

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

기반 탐색 .nav-fill을 사용하는 예 와 유사합니다 .<nav>

HTML

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

플렉스 유틸리티 작업

반응형 탐색 변형이 필요한 경우 일련의 flexbox 유틸리티 사용을 고려하십시오 . 더 장황하지만 이러한 유틸리티는 반응형 중단점에서 더 큰 사용자 지정 기능을 제공합니다. 아래 예에서 탐색은 가장 낮은 중단점에 쌓인 다음 작은 중단점에서 시작하여 사용 가능한 너비를 채우는 수평 레이아웃에 적응합니다.

HTML

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

접근성에 관하여

탐색 모음을 제공하기 위해 탐색을 사용하는 경우 role="navigation"의 가장 논리적인 상위 컨테이너에 a를 추가하거나 전체 탐색 주위에 요소를 <ul>래핑해야 합니다 . <nav>역할을 자체에 추가하지 마십시오. <ul>이렇게 하면 보조 기술에 의해 실제 목록으로 발표되지 않습니다.

.nav-tabs탐색 모음은 시각적으로 클래스 가 있는 탭으로 스타일이 지정되어 있더라도 , 또는 속성 을 제공 해서는 안 됩니다. 이는 ARIA Authoring Practices Guide tabs pattern 에 설명된 대로 동적 탭 인터페이스에만 적합합니다 . 예제는 이 섹션의 동적 탭 인터페이스에 대한 JavaScript 동작 을 참조하십시오 . JavaScript가 활성 탭 에 추가하여 선택된 상태를 처리하므로 동적 탭 인터페이스에는 속성이 필요하지 않습니다 .role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

드롭다운 사용

약간의 추가 HTML과 드롭다운 JavaScript 플러그인 으로 드롭다운 메뉴를 추가합니다 .

드롭다운이 있는 탭

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

드롭다운이 있는 알약

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

CSS

변수

v5.2.0에 추가됨

Bootstrap의 진화하는 CSS 변수 접근 방식의 일부로, 이제 navs 는 향상된 실시간 사용자 정의를 위해 .nav, .nav-tabs및 에서 로컬 CSS 변수를 사용합니다. .nav-pillsCSS 변수의 값은 Sass를 통해 설정되므로 Sass 사용자 정의도 계속 지원됩니다.

.nav기본 클래스 에서 :

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

.nav-tabs수정자 클래스 에서 :

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

.nav-pills수정자 클래스 에서 :

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sass 변수

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

자바스크립트 동작

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

이것은 일부 자리 표시자 콘텐츠 홈 탭의 관련 콘텐츠입니다. 다른 탭을 클릭하면 이 탭의 가시성이 다음 탭으로 전환됩니다. 탭 JavaScript는 클래스를 교환하여 콘텐츠 가시성과 스타일을 제어합니다. .nav탭, 알약 및 기타 구동 탐색 과 함께 사용할 수 있습니다 .

이것은 프로필 탭의 관련 콘텐츠 일부 자리 표시자 콘텐츠입니다. 다른 탭을 클릭하면 이 탭의 가시성이 다음 탭으로 전환됩니다. 탭 JavaScript는 클래스를 교환하여 콘텐츠 가시성과 스타일을 제어합니다. .nav탭, 알약 및 기타 구동 탐색 과 함께 사용할 수 있습니다 .

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

귀하의 요구 사항을 충족하기 위해 이것은 <ul>위에 표시된 대로 기반 마크업 또는 임의의 "자신만의 롤" 마크업과 함께 작동합니다. 를 사용하는 경우 탐색 랜드마크로서의 요소의 기본 역할을 재정의하므로 직접 <nav>추가해서는 안 됩니다. role="tablist"대신 대체 요소(아래 예에서는 단순 <div>)로 전환하고 해당 요소를 둘러쌉니다 <nav>.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

탭 플러그인은 알약과도 작동합니다.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

그리고 수직 알약으로. 이상적으로는 세로 탭 aria-orientation="vertical"의 경우 탭 목록 컨테이너에도 추가해야 합니다.

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

접근성

ARIA Authoring Practices Guide tabs pattern 에 설명된 대로 동적 탭 인터페이스에는 구조, 기능 및 현재 상태를 보조 기술(예: 화면 판독기) 사용자에게 전달하기 위해 , , 및 추가 속성 role="tablist"이 role="tab"필요 role="tabpanel"합니다 . 새 페이지나 위치로 이동하는 링크가 아니라 동적 변경을 트리거하는 컨트롤인 탭 요소를 aria-사용하는 것이 가장 좋습니다 .<button>

ARIA Authoring Practices 패턴에 따라 현재 활성화된 탭만 키보드 포커스를 받습니다. JavaScript 플러그인이 초기화되면 tabindex="-1"모든 비활성 탭 컨트롤에 설정됩니다. 현재 활성 탭에 포커스가 있으면 커서 키가 이전/다음 탭을 활성화하고 플러그인이 그에 따라 로빙tabindex 을 변경합니다 . 그러나 JavaScript 플러그인은 커서 키 상호 작용과 관련하여 가로 및 세로 탭 목록을 구분하지 않습니다. 탭 목록의 방향에 관계없이 위쪽 및 왼쪽 커서는 모두 이전 탭으로 이동하고 아래쪽 및 오른쪽 커서는 다음 탭.

일반적으로 키보드 탐색을 용이하게 하려면 탭 패널 내부에 의미 있는 콘텐츠가 포함된 첫 번째 요소에 이미 포커스가 있는 경우가 아니면 탭 패널 자체에도 포커스를 두는 것이 좋습니다. JavaScript 플러그인은 이 측면을 처리하지 않습니다. 적절한 경우 tabindex="0"마크업을 추가하여 탭 패널에 포커스를 맞출 수 있도록 명시적으로 만들어야 합니다.

탭 JavaScript 플러그인 은 드롭다운 메뉴가 포함된 탭 인터페이스를 지원 하지 않습니다 . 드롭다운 메뉴는 사용성과 접근성 문제를 모두 유발하기 때문입니다. 사용성 관점에서 현재 표시된 탭의 트리거 요소가 즉시 표시되지 않는다는 사실(닫힌 드롭다운 메뉴 내부에 있기 때문에)은 혼란을 일으킬 수 있습니다. 접근성 관점에서 현재 이러한 종류의 구성을 표준 WAI ARIA 패턴에 매핑하는 합리적인 방법이 없습니다. 즉, 보조 기술 사용자가 쉽게 이해할 수 없다는 의미입니다.

데이터 속성 사용

data-bs-toggle="tab"또는 data-bs-toggle="pill"요소 를 지정하여 JavaScript를 작성하지 않고도 탭 또는 알약 탐색을 활성화할 수 있습니다 . .nav-tabs또는 에서 이러한 데이터 속성을 사용합니다 .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

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

자바스크립트를 통해

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

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

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

다음과 같은 여러 가지 방법으로 개별 탭을 활성화할 수 있습니다.

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
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" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

행동 양식

비동기식 메서드 및 전환

모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 그러나 끝나기 전에 호출자에게 돌아갑니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.

자세한 내용은 JavaScript 설명서를 참조하십시오 .

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

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

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

방법	설명
`dispose`	요소의 탭을 파괴합니다.
`getInstance`	DOM 요소와 연결된 탭 인스턴스를 가져올 수 있는 정적 메서드는 다음과 같이 사용할 수 있습니다 `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	DOM 요소에 연결된 탭 인스턴스를 반환하거나 초기화되지 않은 경우 새 탭 인스턴스를 만드는 정적 메서드입니다. 다음과 같이 사용할 수 있습니다 `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	주어진 탭을 선택하고 관련 창을 표시합니다. 이전에 선택한 다른 탭은 선택 취소되고 관련 창이 숨겨집니다. 탭 창이 실제로 표시 되기 전(즉, `shown.bs.tab`이벤트가 발생하기 전) 호출자에게 돌아갑니다.

이벤트

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

hide.bs.tab(현재 활성 탭에서)
show.bs.tab(표시할 탭에서)
hidden.bs.tabhide.bs.tab(이전 활성 탭에서 이벤트 와 동일한 탭 )
shown.bs.tabshow.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 tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})