탐색 및 탭

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

이 페이지에서

기본 탐색

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

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

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

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

사용 가능한 스타일

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

수평 정렬

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

중심 .justify-content-center:

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

수직의

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

탭

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

의사

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

채우기 및 정당화

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

플렉스 유틸리티 작업

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

접근성에 관하여

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

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

드롭다운 사용

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

드롭다운이 있는 탭

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

드롭다운이 있는 알약

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

사스

변수

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $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파일을 통해 포함)을 사용하여 탐색 탭과 알약을 확장하여 로컬 콘텐츠의 탭 가능한 창을 만듭니다.

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

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

이것은 일부 자리 표시자 콘텐츠 홈 탭의 관련 콘텐츠입니다. 다른 탭을 클릭하면 이 탭의 가시성이 다음 탭으로 전환됩니다. 탭 JavaScript는 클래스를 교환하여 콘텐츠 가시성과 스타일을 제어합니다. .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 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.

<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="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

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

<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>
  </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">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

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

<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>
</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">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

그리고 수직 알약으로.

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-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">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

데이터 속성 사용

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">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</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" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

행동 양식

비동기식 메서드 및 전환

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

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

constructor

탭 요소와 콘텐츠 컨테이너를 활성화합니다. 탭 에는 DOM의 컨테이너 노드를 대상으로 data-bs-target하는 속성 또는 링크를 사용하는 경우 속성이 있어야 합니다.href

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

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

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

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

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

dispose

요소의 탭을 파괴합니다.

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

이벤트

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

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