Source

Nav

Dokumentasyon ug mga pananglitan kon unsaon paggamit ang mga bahin sa nabigasyon sa Bootstrap.

Base nav

Ang nabigasyon nga anaa sa Bootstrap nagbahin sa kinatibuk-ang marka ug mga estilo, gikan sa base .navnga klase ngadto sa aktibo ug baldado nga mga estado. Ibaylo ang mga klase sa modifier aron mabalhin sa matag istilo.

Ang base .navnga sangkap gitukod gamit ang flexbox ug naghatag usa ka lig-on nga pundasyon alang sa pagtukod sa tanan nga mga lahi sa mga sangkap sa nabigasyon. Naglakip kini sa pipila ka mga override sa estilo (alang sa pagtrabaho uban sa mga lista), pipila ka link padding alang sa mas dagkong mga lugar nga naigo, ug batakang disabled nga estilo.

Ang sukaranan .navnga sangkap wala maglakip sa bisan unsang .activeestado. Ang mosunod nga mga pananglitan naglakip sa klase, nag-una aron ipakita nga kining partikular nga klase wala magpahinabog bisan unsang espesyal nga estilo.

<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="#">Disabled</a>
  </li>
</ul>

Ang mga klase gigamit sa tibuuk, aron ang imong markup mahimong labi ka dali. Gamita <ul>ang s sama sa ibabaw, o i-roll ang imong kaugalingon gamit ang usa ka <nav>elemento. Tungod kay ang mga .navgamit display: flex, ang nav links molihok sama sa nav item, apan walay dugang nga marka.

<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="#">Disabled</a>
</nav>

Anaa nga mga estilo

Usba ang estilo sa .navs component nga adunay mga modifier ug mga utilities. Pagsagol ug pagpares kung gikinahanglan, o paghimo og imong kaugalingon.

Horizontal nga pag-align

Usba ang horizontal alignment sa imong nav gamit ang flexbox utilities . Sa kasagaran, ang mga nav kay left-aligned, pero dali ra nimo kining usbon sa center o right aligned.

Nakasentro sa .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="#">Disabled</a>
  </li>
</ul>

Nahiangay sa tuo sa .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="#">Disabled</a>
  </li>
</ul>

Bertikal

I-stack ang imong nabigasyon pinaagi sa pagbag-o sa direksyon sa flex item gamit ang .flex-columnutility. Kinahanglan nga i-stack kini sa pipila ka mga viewports apan dili sa uban? Gamita ang responsive nga mga bersyon (pananglitan, .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="#">Disabled</a>
  </li>
</ul>

Sama sa kanunay, ang bertikal nabigasyon posible nga walay <ul>s, usab.

<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="#">Disabled</a>
</nav>

Mga tab

Gikuha ang batakang nav gikan sa ibabaw ug gidugang ang .nav-tabsklase aron makamugna og tabbed interface. Gamita kini sa paghimo og tabbable nga mga rehiyon gamit ang among tab nga JavaScript plugin .

<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="#">Disabled</a>
  </li>
</ul>

Pills

Kuhaa kanang parehas nga HTML, apan gamita .nav-pillshinuon:

<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="#">Disabled</a>
  </li>
</ul>

Pun-a ug tarong

Pugsa ang imong .navsulod sa pagpalapad sa bug-os nga magamit nga gilapdon usa sa duha ka klase sa modifier. Aron mapun-an ang tanang magamit nga luna sa imong .nav-items, gamita ang .nav-fill. Matikdi nga ang tanan nga pinahigda nga luna giokupahan, apan dili ang matag nav item adunay parehas nga gilapdon.

<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="#">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="#">Disabled</a>
  </li>
</ul>

Kung mogamit usa ka <nav>nabigasyon nga nakabase, siguruha nga ilakip .nav-itemsa mga angkla.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

Alang sa managsama nga gilapdon nga mga elemento, gamita ang .nav-justified. Ang tanan nga pinahigda nga luna maokupar sa mga link sa nav, apan dili sama sa .nav-fillibabaw, ang matag butang sa nav parehas ang gilapdon.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

Sama sa .nav-fillpananglitan gamit ang usa ka <nav>-based navigation, siguruha nga ilakip .nav-itemsa mga angkla.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

Pagtrabaho uban sa flex utilities

Kung kinahanglan nimo ang mga nagbag-o nga pagtubag sa nav, hunahunaa ang paggamit sa usa ka serye sa mga gamit sa flexbox . Bisan kung labi ka verbose, kini nga mga utility nagtanyag labi ka labi nga pag-customize sa mga responsive breakpoints. Sa pananglitan sa ubos, ang among nav i-stack sa pinakaubos nga breakpoint, unya ipahiangay sa pinahigda nga layout nga mopuno sa magamit nga gilapdon sugod sa gamay nga breakpoint.

<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="#">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="#">Disabled</a>
</nav>

Mahitungod sa accessibility

Kung naggamit ka ug navs para maghatag ug navigation bar, siguruha nga magdugang ug usa role="navigation"sa labing lohikal nga sudlanan sa ginikanan sa <ul>, o ibutang ang usa ka <nav>elemento sa tibuok nabigasyon. Ayaw idugang ang papel sa <ul>iyang kaugalingon, tungod kay kini makapugong niini nga ipahibalo ingon usa ka aktwal nga lista sa mga teknolohiya nga makatabang.

Timan-i nga ang mga navigation bar, bisan kung biswal nga gi-istilo ingon mga tab nga adunay .nav-tabsklase, dili kinahanglan hatagan role="tablist", role="tab"o role="tabpanel"mga hiyas. Angayan lang kini alang sa dinamikong tabbed nga mga interface, sama sa gihulagway sa WAI ARIA Authoring Practices . Tan-awa ang pamatasan sa JavaScript alang sa mga dinamikong tabbed nga mga interface sa kini nga seksyon alang sa usa ka pananglitan.

Paggamit sa mga dropdown

Idugang ang mga dropdown menu nga adunay gamay nga ekstra nga HTML ug ang dropdown JavaScript plugin .

Mga tab nga adunay mga dropdown

<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="#">Disabled</a>
  </li>
</ul>

Mga pildoras nga adunay mga dropdown

<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="#">Disabled</a>
  </li>
</ul>

Panggawi sa JavaScript

Gamita ang tab nga JavaScript nga plugin—ilakip kini sa tagsa-tagsa o ​​pinaagi sa gihugpong bootstrap.jsnga file—aron i-extend ang among navigational tabs ug pills aron makahimo og tabable pane sa lokal nga content, bisan pinaagi sa dropdown menus.

Kung nagtukod ka sa among JavaScript gikan sa gigikanan, nanginahanglan kiniutil.js .

Ang mga dinamikong tabbed nga mga interface, sama sa gihulagway sa WAI ARIA Authoring Practices , nanginahanglan role="tablist", role="tab", role="tabpanel", ug dugang aria-nga mga hiyas aron mapahayag ang ilang istruktura, gamit ug kasamtangan nga kahimtang sa mga tiggamit sa mga teknolohiya nga makatabang (sama sa mga tigbasa sa screen).

Timan-i nga ang dinamikong tabbed nga mga interface kinahanglan dili maglangkob sa mga dropdown menu, tungod kay kini ang hinungdan sa mga isyu sa usability ug accessibility. Gikan sa usa ka usability perspective, ang kamatuoran nga ang gipakita karon nga elemento sa trigger sa tab dili dayon makita (tungod kay naa sa sulod sa closed dropdown menu) mahimong hinungdan sa kalibog. Gikan sa usa ka accessibility nga punto sa panglantaw, sa pagkakaron walay makatarunganon nga paagi sa pagmapa niini nga matang sa pagtukod ngadto sa usa ka standard WAI ARIA pattern, nga nagpasabot nga kini dili sayon ​​​​nga masabtan sa mga tiggamit sa assistive nga mga teknolohiya.

Hilaw nga denim tingali wala ka nakadungog bahin kanila nga maong nga shorts nga Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex nukos. Ibutang ang salvia cillum iphone. Seitan aliquip quis cardigan american apparel, 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>

Aron makatabang sa pagpahaom sa imong mga panginahanglan, kini magamit sa <ul>-based markup, sama sa gipakita sa ibabaw, o sa bisan unsa nga arbitraryong "pag-roll sa imong kaugalingon" nga markup. Timan-i nga kung imong gigamit ang <nav>, dili ka kinahanglan nga direktang magdugang role="tablist"niini, tungod kay kini mag-override sa lumad nga tahas sa elemento isip usa ka timaan sa nabigasyon. Hinunoa, balhin sa usa ka alternatibo nga elemento (sa panig-ingnan sa ubos, usa ka yano <div>) ug ibutang ang <nav>palibot niini.

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

Ang tab nga plugin nagtrabaho usab sa mga pildoras.

Ang sangputanan sa occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Mahimong madugangan ang imong kaugalingon nga wala’y hinungdan nga wala’y hinungdan sa pag-ehersisyo. Iure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minimum anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure 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>

Ug sa mga bertikal nga pildoras.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minimum reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minimum 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>

Paggamit sa mga hiyas sa datos

Mahimo nimong i-aktibo ang usa ka tab o pildoras nga nabigasyon nga wala magsulat bisan unsang JavaScript pinaagi lamang sa pagpiho data-toggle="tab"o data-toggle="pill"sa usa ka elemento. Gamita kini nga mga hiyas sa datos sa .nav-tabso .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>

Pinaagi sa JavaScript

I-enable ang mga tab nga tab pinaagi sa JavaScript (matag tab kinahanglan nga i-activate sa tagsa-tagsa):

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

Mahimo nimong ma-aktibo ang indibidwal nga mga tab sa daghang mga paagi:

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

Malawos nga epekto

Aron mawala ang mga tab, idugang .fadeang matag usa .tab-pane. Ang una nga tab pane kinahanglan usab .shownga maghimo sa una nga sulud nga makita.

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

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi nga tawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon.

$().tab

Nag-aktibo sa usa ka elemento sa tab ug sulud sa sulud. Ang tab kinahanglan adunay usa data-targeto usa ka hreftarget sa usa ka sudlanan nga node sa 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('ipakita')

Gipili ang gihatag nga tab ug gipakita ang kauban nga pane niini. Ang bisan unsang lain nga tab nga gipili kaniadto mahimong dili mapili ug ang kauban nga pane niini gitago. Mibalik sa nagtawag sa wala pa ipakita ang tab pane (ie sa wala pa shown.bs.tabmahitabo ang panghitabo).

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

.tab('dispose')

Giguba ang tab sa usa ka elemento.

Mga panghitabo

Kung nagpakita ug bag-ong tab, ang mga panghitabo mobuto sa mosunod nga han-ay:

  1. hide.bs.tab(sa kasamtangan nga aktibo nga tab)
  2. show.bs.tab(sa tab nga ipakita)
  3. hidden.bs.tab(sa miaging aktibo nga tab, parehas sa alang sa hide.bs.tabpanghitabo)
  4. shown.bs.tab(sa bag-ong-aktibo nga bag-o lang gipakita nga tab, parehas sa alang sa show.bs.tabpanghitabo)

Kung walay tab nga aktibo na, ang hide.bs.tabug ang hidden.bs.tabmga panghitabo dili ipabuto.

Uri sa Hitabo Deskripsyon
show.bs.tab Kini nga panghitabo nagdilaab sa tab show, apan sa wala pa ipakita ang bag-ong tab. Gamita event.targetug event.relatedTargeti-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa.
gipakita.bs.tab Kini nga panghitabo nagdilaab sa tab show pagkahuman gipakita ang usa ka tab. Gamita event.targetug event.relatedTargeti-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa.
hide.bs.tab Kini nga panghitabo mobuto kung ang usa ka bag-ong tab ipakita (ug sa ingon ang miaging aktibo nga tab kinahanglan itago). Gamita event.targetug event.relatedTargeti-target ang kasamtangan nga aktibo nga tab ug ang bag-o nga dili madugay nga mahimong aktibo nga tab, matag usa.
tago.bs.tab Kini nga panghitabo nagdilaab human ang usa ka bag-ong tab gipakita (ug sa ingon ang miaging aktibo nga tab gitago). Gamita event.targetug event.relatedTargeti-target ang miaging aktibo nga tab ug ang bag-ong aktibo nga tab, matag usa. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})