in English

Navs

Tài liệu và ví dụ về cách sử dụng các thành phần điều hướng đi kèm của Bootstrap.

Điều hướng cơ sở

Điều hướng có sẵn trong Bootstrap chia sẻ kiểu và đánh dấu chung, từ .navlớp cơ sở đến trạng thái hoạt động và trạng thái bị vô hiệu hóa. Hoán đổi các lớp bổ trợ để chuyển đổi giữa mỗi kiểu.

Thành .navphần cơ sở được xây dựng bằng flexbox và cung cấp nền tảng vững chắc để xây dựng tất cả các loại thành phần điều hướng. Nó bao gồm một số ghi đè kiểu (để làm việc với danh sách), một số đệm liên kết cho các vùng truy cập lớn hơn và kiểu cơ bản bị tắt.

Thành .navphần cơ sở không bao gồm bất kỳ .activetrạng thái nào. Các ví dụ sau bao gồm lớp, chủ yếu để chứng minh rằng lớp cụ thể này không kích hoạt bất kỳ kiểu đặc biệt nào. 
<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>

Các lớp học được sử dụng xuyên suốt, vì vậy đánh dấu của bạn có thể siêu linh hoạt. Sử dụng <ul>các mục như trên, <ol>nếu thứ tự các mặt hàng của bạn là quan trọng, hoặc cuộn của riêng bạn với một <nav>phần tử. Bởi vì việc .navsử dụng display: flex, các liên kết điều hướng hoạt động giống như các mục điều hướng, nhưng không có đánh dấu bổ sung.

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

Các kiểu có sẵn

Thay đổi kiểu của .navthành phần s bằng các bổ ngữ và tiện ích. Trộn và kết hợp nếu cần, hoặc xây dựng của riêng bạn.

Căn chỉnh theo chiều ngang

Thay đổi căn chỉnh ngang của điều hướng của bạn bằng các tiện ích flexbox . Theo mặc định, các nav được căn trái, nhưng bạn có thể dễ dàng thay đổi chúng thành căn giữa hoặc căn phải.

Căn giữa với .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>

Căn phải với .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>

Theo chiều dọc

Xếp chồng điều hướng của bạn bằng cách thay đổi hướng mục linh hoạt với .flex-columntiện ích. Cần xếp chúng trên một số khung nhìn nhưng không phải những khung khác? Sử dụng các phiên bản đáp ứng (ví dụ .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>

Như mọi khi, điều hướng dọc cũng có thể thực hiện được mà không cần <ul>s.

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

Các tab

Lấy điều hướng cơ bản từ phía trên và thêm .nav-tabslớp để tạo giao diện theo thẻ. Sử dụng chúng để tạo các vùng có thể lập tab bằng plugin JavaScript tab của chúng tôi .

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

Thuốc

Sử dụng cùng một HTML đó, nhưng sử dụng .nav-pillsthay thế:

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

Điền và căn chỉnh

Buộc .navnội dung của bạn mở rộng toàn bộ chiều rộng có sẵn một trong hai lớp bổ trợ. Để lấp đầy một cách tương xứng tất cả không gian có sẵn với .nav-items của bạn, hãy sử dụng .nav-fill. Lưu ý rằng tất cả không gian theo chiều ngang đều bị chiếm dụng, nhưng không phải mọi mục điều hướng đều có cùng chiều rộng.

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

Khi sử dụng <nav>điều hướng dựa trên cơ sở, bạn có thể bỏ qua một cách an toàn .nav-itemvì chỉ .nav-linkcần thiết cho các phần tử tạo kiểu <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>

Đối với các phần tử có chiều rộng bằng nhau, hãy sử dụng .nav-justified. Tất cả không gian ngang sẽ bị chiếm bởi các liên kết điều hướng, nhưng không giống như .nav-fillở trên, mọi mục điều hướng sẽ có cùng chiều rộng.

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

Tương tự .nav-fillnhư ví dụ sử dụng <nav>điều hướng dựa trên cơ sở.

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

Làm việc với các tiện ích linh hoạt

Nếu bạn cần các biến thể điều hướng đáp ứng, hãy xem xét sử dụng một loạt các tiện ích flexbox . Mặc dù dài dòng hơn, nhưng các tiện ích này cung cấp khả năng tùy chỉnh cao hơn trên các điểm ngắt đáp ứng. Trong ví dụ bên dưới, điều hướng của chúng ta sẽ được xếp chồng lên điểm ngắt thấp nhất, sau đó thích ứng với bố cục nằm ngang lấp đầy chiều rộng có sẵn bắt đầu từ điểm ngắt nhỏ.

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

Về khả năng tiếp cận

Nếu bạn đang sử dụng nav để cung cấp thanh điều hướng, hãy đảm bảo thêm một role="navigation"vào vùng chứa mẹ hợp lý nhất của <ul>hoặc bao bọc một <nav>phần tử xung quanh toàn bộ điều hướng. Không thêm vai trò vào <ul>chính nó, vì điều này sẽ ngăn nó được công bố như một danh sách thực tế bởi các công nghệ hỗ trợ.

Lưu ý rằng thanh điều hướng, ngay cả khi được tạo kiểu trực quan dưới dạng tab cùng .nav-tabslớp, không nên được cung cấp role="tablist"hoặc role="tab"thuộc role="tabpanel"tính. Những điều này chỉ thích hợp cho các giao diện có tab động, như được mô tả trong mẫu tab Hướng dẫn thực hành tác giả ARIA . Xem hành vi JavaScript cho các giao diện theo thẻ động trong phần này để làm ví dụ.

Sử dụng trình đơn thả xuống

Thêm menu thả xuống với một chút HTML bổ sung và plugin JavaScript thả xuống .

Các tab có danh sách thả xuống

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

Thuốc có danh sách thả xuống

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

Hành vi JavaScript

Sử dụng plugin JavaScript tab — bao gồm nó riêng lẻ hoặc thông qua bootstrap.jstệp đã biên dịch — để mở rộng các tab và viên điều hướng của chúng tôi nhằm tạo các ngăn có thể tab của nội dung cục bộ.

Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó yêu cầuutil.js .

Giao diện tab động, như được mô tả trong mẫu tab Hướng dẫn thực hành tác giả ARIArole="tablist" , yêu cầu role="tab"và role="tabpanel"các aria-thuộc tính bổ sung để truyền đạt cấu trúc, chức năng và trạng thái hiện tại của chúng cho người dùng công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình). Cách tốt nhất, chúng tôi khuyên bạn nên sử dụng <button>các phần tử cho các tab, vì đây là các điều khiển kích hoạt thay đổi động, thay vì các liên kết điều hướng đến một trang hoặc vị trí mới.

Lưu ý rằng plugin JavaScript tab không hỗ trợ giao diện tab có chứa menu thả xuống, vì những giao diện này gây ra cả vấn đề khả năng sử dụng và khả năng truy cập. Từ góc độ khả năng sử dụng, thực tế là phần tử kích hoạt của tab hiện đang hiển thị không hiển thị ngay lập tức (vì nó nằm trong menu thả xuống đã đóng) có thể gây ra nhầm lẫn. Từ quan điểm khả năng tiếp cận, hiện không có cách hợp lý nào để ánh xạ loại cấu trúc này với một mẫu WAI ARIA tiêu chuẩn, có nghĩa là nó không thể dễ hiểu đối với người sử dụng công nghệ hỗ trợ.

Nội dung trình giữ chỗ cho bảng tab. Cái này liên quan đến tab trang chủ. Đưa bạn cao hàng dặm, thật cao, vì cô ấy có nụ cười quốc tế đó. Có một người lạ trên giường của tôi, có một tiếng thình thịch trong đầu tôi. Ôi không. Trong một cuộc sống khác, tôi sẽ khiến bạn ở lại. Vì tôi, tôi có khả năng làm bất cứ điều gì. Chuẩn bị cho cuộc chiến giành vương miện của tôi. Được sử dụng để lấy trộm rượu của cha mẹ bạn và leo lên mái nhà. Giai điệu, rám nắng phù hợp và sẵn sàng, bật nó lên khiến nó nặng nề. Tình yêu của cô ấy giống như một liều thuốc. Tôi đoán rằng tôi đã quên rằng tôi có một sự lựa chọn.

Nội dung trình giữ chỗ cho bảng tab. Cái này liên quan đến tab hồ sơ. Bạn có kiến ​​trúc tốt nhất. Tem hộ chiếu, cô ấy có tính quốc tế. Tốt, tươi mới, dữ dội, chúng tôi đã khóa nó. Không bao giờ dự định rằng một ngày nào đó anh sẽ mất em. Cô ấy ăn thịt trái tim của bạn. Nụ hôn của bạn là vũ trụ, mọi chuyển động đều là ma thuật. Ý tôi là những người, tôi có nghĩa là như cô ấy là một. Chào những người thân yêu hãy cùng tham gia một cuộc hành trình. Chỉ cần sở hữu đêm như ngày 4 tháng 7! Nhưng bạn thà bị lãng phí.

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>

Để giúp phù hợp với nhu cầu của bạn, điều này hoạt động với <ul>đánh dấu dựa trên, như được hiển thị ở trên hoặc với bất kỳ đánh dấu "tự cuộn" nào tùy ý. Lưu ý rằng nếu bạn đang sử dụng <nav>, bạn không nên thêm role="tablist"trực tiếp vào nó, vì điều này sẽ ghi đè vai trò gốc của phần tử làm mốc điều hướng. Thay vào đó, hãy chuyển sang một phần tử thay thế (trong ví dụ dưới đây, một phần tử đơn giản <div>) và quấn <nav>xung quanh nó.

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

Plugin tab cũng hoạt động với thuốc.

Nội dung trình giữ chỗ cho bảng tab. Cái này liên quan đến tab trang chủ. Đưa bạn cao hàng dặm, thật cao, vì cô ấy có nụ cười quốc tế đó. Có một người lạ trên giường của tôi, có một tiếng thình thịch trong đầu tôi. Ôi không. Trong một cuộc sống khác, tôi sẽ khiến bạn ở lại. Vì tôi, tôi có khả năng làm bất cứ điều gì. Chuẩn bị cho cuộc chiến giành vương miện của tôi. Được sử dụng để lấy trộm rượu của cha mẹ bạn và leo lên mái nhà. Giai điệu, rám nắng phù hợp và sẵn sàng, bật nó lên khiến nó nặng nề. Tình yêu của cô ấy giống như một liều thuốc. Tôi đoán rằng tôi đã quên rằng tôi có một sự lựa chọn.

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.

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

Và với những viên thuốc dọc.

Nội dung trình giữ chỗ cho bảng tab. Cái này liên quan đến tab trang chủ. Thấy bạn hát nhạc Blues ở trung tâm thành phố. Quan sát bạn vòng tròn cống. Tại sao bạn không cho tôi ghé qua? Nặng là đầu đội vương miện. Vâng, chúng tôi làm cho các thiên thần khóc, mưa xuống trái đất từ ​​trên cao. Muốn xem chương trình ở định dạng 3D, một bộ phim. Bạn có bao giờ cảm thấy, cảm thấy giấy mỏng như vậy. Đó là có hoặc không, có thể không.

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>

Sử dụng thuộc tính dữ liệu

Bạn có thể kích hoạt điều hướng tab hoặc viên thuốc mà không cần viết bất kỳ JavaScript nào bằng cách chỉ định data-toggle="tab"hoặc data-toggle="pill"trên một phần tử. Sử dụng các thuộc tính dữ liệu này trên .nav-tabshoặc .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>

Qua JavaScript

Bật các tab có thể chuyển thành tab qua JavaScript (mỗi tab cần được kích hoạt riêng lẻ):

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

Bạn có thể kích hoạt các tab riêng lẻ theo một số cách:

$('#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

Hiệu ứng mờ dần

Để làm cho các tab mờ dần, hãy thêm .fadevào từng tab .tab-pane. Ngăn tab đầu tiên cũng phải .showhiển thị nội dung ban đầu.

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

Phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Họ quay lại người gọi ngay sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .

tab $ ().

Kích hoạt phần tử tab và vùng chứa nội dung. Tab phải có một data-targethoặc, nếu sử dụng liên kết, một hrefthuộc tính nhắm mục tiêu đến một nút vùng chứa trong DOM.

<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 ('show')

Chọn tab đã cho và hiển thị ngăn liên kết của nó. Bất kỳ tab nào khác đã được chọn trước đó sẽ trở thành không được chọn và ngăn liên kết của nó bị ẩn. Trả về trình gọi trước khi ngăn tab thực sự được hiển thị (tức là trước khi shown.bs.tabsự kiện xảy ra).

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

.tab ('vứt bỏ')

Hủy tab của một phần tử.

Sự kiện

Khi hiển thị một tab mới, các sự kiện sẽ kích hoạt theo thứ tự sau:

  1. hide.bs.tab(trên tab hoạt động hiện tại)
  2. show.bs.tab(trên tab được hiển thị)
  3. hidden.bs.tab(trên tab hoạt động trước đó, tab tương tự như cho hide.bs.tabsự kiện)
  4. shown.bs.tab(trên tab vừa được hiển thị mới hoạt động, tab tương tự như đối với show.bs.tabsự kiện)

Nếu không có tab nào hoạt động, thì sự kiện hide.bs.tabvà hidden.bs.tabsẽ không được kích hoạt.

Loại sự kiện Sự mô tả
show.bs.tab Sự kiện này kích hoạt trên chương trình tab, nhưng trước khi tab mới được hiển thị. Sử dụng event.targetvà event.relatedTargetđể nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng.
show.bs.tab Sự kiện này kích hoạt trên tab hiển thị sau khi tab được hiển thị. Sử dụng event.targetvà event.relatedTargetđể nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng.
hide.bs.tab Sự kiện này kích hoạt khi một tab mới được hiển thị (và do đó tab đang hoạt động trước đó sẽ bị ẩn). Sử dụng event.targetvà event.relatedTargetđể nhắm mục tiêu tab đang hoạt động hiện tại và tab sắp hoạt động mới, tương ứng.
hidden.bs.tab Sự kiện này kích hoạt sau khi một tab mới được hiển thị (và do đó tab hoạt động trước đó bị ẩn). Sử dụng event.targetvà event.relatedTargetđể nhắm mục tiêu tab hoạt động trước đó và tab hoạt động mới, tương ứng. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})