탐색

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

기본 탐색

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

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

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

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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 동작 을 참조하십시오 .role="tablist"role="tab"role="tabpanel"

드롭다운 사용

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

드롭다운이 있는 탭

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

자바스크립트 동작

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

소스에서 JavaScript를 빌드하는 경우util.js .

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

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

탭 패널의 자리 표시자 콘텐츠입니다. 이것은 홈 탭과 관련이 있습니다. 그녀는 국제적인 미소를 가지고 있기 때문에 당신을 높이, 너무 높이 데려갑니다. 내 침대에 낯선 사람이 있고, 내 머리가 쿵쾅거린다. 안 돼. 다른 삶에서 나는 당신을 머물게 할 것입니다. 난 뭐든지 할 수 있으니까. 내 최고의 전투를 위해 옷을 입는다. 부모님의 술을 훔쳐 옥상으로 올라가곤 했다. 톤, 탠 핏, 준비 완료, 무거워지기 때문에 볼륨을 높이세요. 그녀의 사랑은 마약과도 같습니다. 나에게 선택권이 있다는 걸 잊고 있었던 것 같다.

탭 패널의 자리 표시자 콘텐츠입니다. 이것은 프로필 탭과 관련이 있습니다. 당신은 최고의 건축물을 얻었습니다. 여권 스탬프, 그녀는 국제적입니다. 훌륭하고 신선하고 치열합니다. 언젠가 내가 당신을 잃을 것이라고는 결코 계획하지 않았습니다. 그녀는 당신의 마음을 먹는다. 당신의 키스는 우주적이고 모든 움직임은 마법입니다. 내 말은, 그녀가 그 사람인 것처럼 말이야. 사랑하는 사람에게 인사하고 여행을 떠나자. 7월 4일 같은 밤을 보내세요! 그러나 당신은 오히려 낭비하고 싶습니다.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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>

그리고 수직 알약으로.

탭 패널의 자리 표시자 콘텐츠입니다. 이것은 홈 탭과 관련이 있습니다. 시내에서 Blues를 부르는 걸 봤어. 배수구를 도는 것을 지켜보십시오. 왜 내가 들르는 것을 허락하지 않는가? 무거운 것은 왕관을 쓰는 머리입니다. 그렇습니다. 우리는 천사들을 울게 하여 위로부터 땅에 비를 내리게 합니다. 영화 3D로 쇼를 보고 싶어요. 종이가 너무 얇다고 느낀 적이 있습니까? 그것은 예 또는 아니오, 아니 어쩌면입니다.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

데이터 속성 사용

data-toggle="tab"또는 data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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를 통해 탭 가능 탭 활성화(각 탭을 개별적으로 활성화해야 함):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 설명서를 참조하십시오 .

$().탭

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('보여주기')

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

$('#someTab').tab('show')

.tab('처분')

요소의 탭을 파괴합니다.

이벤트

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

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`하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
표시됨.bs.tab	이 이벤트는 탭이 표시된 후 탭이 표시될 때 발생합니다. `event.target`및 를 사용 `event.relatedTarget`하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
숨김.bs.tab	이 이벤트는 새 탭이 표시될 때 발생합니다(따라서 이전 활성 탭이 숨겨짐). `event.target`및 를 사용 `event.relatedTarget`하여 각각 현재 활성 탭과 곧 활성화될 새 탭을 대상으로 지정합니다.
hidden.bs.tab	이 이벤트는 새 탭이 표시된 후에 시작됩니다(따라서 이전 활성 탭이 숨겨짐). `event.target`및 를 사용 `event.relatedTarget`하여 각각 이전 활성 탭과 새 활성 탭을 대상으로 지정합니다.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})