탐색 및 탭

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

이 페이지에서

Base nav

부트스트랩에서 사용할 수 있는 탐색은 기본 .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">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">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">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">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">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">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">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">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">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">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">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">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">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">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">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탭, 알약 및 기타 구동 탐색 과 함께 사용할 수 있습니다 .

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

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

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

그리고 수직 알약으로.

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

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

<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 button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

var 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">...</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 button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

보여 주다

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

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

  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

이벤트

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

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