Source

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

Khi sử dụng <nav>điều hướng dựa trên cơ sở, hãy đảm bảo bao gồm .nav-itemcác neo.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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ở, hãy đảm bảo bao gồm .nav-itemcác neo.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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. Các giao diện này chỉ thích hợp cho các giao diện theo thẻ động, như được mô tả trong các Thực tiễn về tác giả của WAI 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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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ộ, ngay cả qua menu thả xuống.

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 theo thẻ động, như được mô tả trong Thực tiễn tác giả WAI 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).

Lưu ý rằng giao diện theo thẻ động không được chứa menu thả xuống, vì điều này gây ra các vấn đề về 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ợ.

Chất liệu denim thô chắc hẳn bạn chưa từng nghe nói đến quần short jean Austin. Nesciunt đậu phụ stumptown aliqua, làm sạch tổng thể retro synth. Ria mép khuôn mẫu, williamsburg carles vegan helvetica. Người bán thịt người bán thịt retro keffiyeh dreamcatcher synth. Áo len Cosby eu banh mi, qui irure terry richardson ex ink. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan may mặc của mỹ, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud tập thể dục proident est nisi. Irure magna elit Goodso anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmodequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu tập thể dục không đảm bảo Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur labourum qui. Id id reploynderit sit est eu aliqua occaecat quis et velit excepteur labourum mollit dolore eiusmod. Ipsum dolor trong occaecat Goodso et voluptate minim reploynderit mollit pariesur. Deserunt non labourum enim et cillum eu Descepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.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 a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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 một hrefnhắm mục tiêu một nút vùng chứa trong DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').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. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})