Navs

Dokumentasi lan conto carane nggunakake komponen navigasi sing kalebu Bootstrap.

Pangkalan nav

Navigasi kasedhiya ing Bootstrap nuduhake markup lan gaya umum, saka .navkelas dhasar menyang negara aktif lan dipatèni. Ganti kelas modifier kanggo ngalih ing antarane saben gaya.

Komponen dhasar .navdibangun nganggo flexbox lan nyedhiyakake dhasar sing kuat kanggo mbangun kabeh jinis komponen navigasi. Iku kalebu sawetara gaya overrides (kanggo nggarap dhaptar), sawetara link padding kanggo wilayah hit luwih gedhe, lan dhasar styling dipatèni.

Komponen dhasar .navora kalebu .activenegara apa wae. Conto ing ngisor iki kalebu kelas, utamané kanggo nduduhake yen kelas tartamtu iki ora micu sembarang noto khusus.

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

Kelas digunakake ing saindhenging, supaya markup sampeyan bisa super fleksibel. Gunakake <ul>s kaya ndhuwur, <ol>yen urutan item penting, utawa muter dhewe karo <nav>unsur. Amarga .navnggunakake display: flex, pranala nav tumindak padha karo item nav, nanging tanpa markup ekstra.

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

Gaya kasedhiya

Ngganti gaya .navkomponen s karo modifiers lan keperluan. Nyampur lan cocog yen perlu, utawa gawe dhewe.

Alignment horisontal

Ngganti keselarasan horisontal saka nav karo keperluan flexbox . Kanthi gawan, navs kiwa-selaras, nanging sampeyan bisa kanthi gampang ngganti menyang tengah utawa tengen didadekake siji.

Pusat karo .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>

Sejajar tengen karo .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>

Vertikal

Tumpukan pandhu arah kanthi ngganti arah item fleksibel karo .flex-columnsarana. Perlu tumpukan ing sawetara viewports nanging ora liyane? Gunakake versi responsif (contone, .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>

Minangka tansah, pandhu arah vertikal bisa tanpa <ul>s, banget.

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

Tab

Njupuk nav dhasar saka ndhuwur lan nambah .nav-tabskelas kanggo generate antarmuka tab. Gunakake kanggo nggawe wilayah tabable nganggo plugin JavaScript tab .

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

Pil

Njupuk HTML sing padha, nanging gunakake .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>

Isi lan mbenerake

Meksa .navkonten sampeyan kanggo ngluwihi jembar sing kasedhiya ing salah siji saka rong kelas modifier. Kanggo ngisi kabeh spasi sing kasedhiya kanthi proporsional karo .nav-items sampeyan, gunakake .nav-fill. Kabar sing kabeh spasi horisontal dikuwasani, nanging ora saben item nav jembaré padha.

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

Nalika nggunakake <nav>navigasi adhedhasar, sampeyan bisa ngilangi .nav-itemkanthi aman amarga mung .nav-linkdibutuhake kanggo unsur gaya <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>

Kanggo unsur sing padha karo jembaré, gunakake .nav-justified. Kabeh spasi horisontal bakal dikuwasani dening pranala nav, nanging ora kaya .nav-fillndhuwur, saben item nav bakal padha jembaré.

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

Kaya .nav-fillconto nggunakake <nav>pandhu arah basis.

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

Nggarap utilitas fleksibel

Yen sampeyan mbutuhake variasi nav responsif, nimbang nggunakake seri saka keperluan flexbox . Nalika luwih wicaksana, utilitas iki nawakake kustomisasi sing luwih gedhe ing breakpoints responsif. Ing conto ing ngisor iki, nav kita bakal dibandhingke ing breakpoint paling, banjur ngganti menyang tata horisontal sing ngiseni jembaré kasedhiya miwiti saka breakpoint cilik.

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

Babagan aksesibilitas

Yen sampeyan nggunakake navs kanggo nyedhiyani garis pandhu arah, dadi manawa kanggo nambah role="navigation"menyang wadhah induk paling logis saka <ul>, utawa Lebokake <nav>unsur sak pandhu arah kabeh. Aja nambahake peran kasebut ing <ul>awake dhewe, amarga iki bakal nyegah supaya ora diumumake minangka dhaptar nyata dening teknologi bantu.

Elinga yen garis navigasi, sanajan ditata kanthi visual minangka tab karo .nav-tabskelas, ora kudu diwenehi role="tablist", role="tab"utawa role="tabpanel"atribut. Iki mung cocok kanggo antarmuka tab dinamis, kaya sing diterangake ing pola tab ARIA Authoring Practices Guide . Deleng prilaku JavaScript kanggo antarmuka tab dinamis ing bagean iki kanggo conto.

Nggunakake dropdowns

Tambah menu gulung mudhun kanthi HTML ekstra lan plugin JavaScript gulung mudhun .

Tab karo dropdowns

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

Pil karo dropdowns

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

Prilaku JavaScript

Gunakake plugin JavaScript tab-kalebu dhewe utawa liwat bootstrap.jsfile sing dikompilasi-kanggo ngluwihi tab navigasi lan pil kanggo nggawe panel tabable isi lokal.

Yen sampeyan lagi mbangun JavaScript saka sumber, mbutuhakeutil.js .

Antarmuka tab dinamis, kaya sing diterangake ing pola tab Pandhuan Praktik Pengarang ARIA , mbutuhake role="tablist", role="tab", role="tabpanel", lan atribut tambahan aria-kanggo ngirim struktur, fungsi lan kahanan saiki marang pangguna teknologi asisten (kayata pembaca layar). Minangka praktik paling apik, disaranake nggunakake <button>unsur kanggo tab, amarga iki minangka kontrol sing nyebabake owah-owahan dinamis, tinimbang pranala sing navigasi menyang kaca utawa lokasi anyar.

Elinga yen plugin JavaScript tab ora ndhukung antarmuka tab sing ngemot menu gulung mudhun, amarga iki nyebabake masalah kegunaan lan aksesibilitas. Saka perspektif kegunaan, kasunyatan manawa unsur pemicu tab sing saiki ditampilake ora langsung katon (amarga ana ing menu gulung mudhun sing ditutup) bisa nyebabake kebingungan. Saka sudut pandang aksesibilitas, saiki ora ana cara sing wicaksana kanggo nggawe peta konstruksi iki menyang pola WAI ARIA standar, tegese ora bisa dimangerteni kanthi gampang kanggo pangguna teknologi bantuan.

Isi placeholder kanggo panel tab. Iki ana hubungane karo tab ngarep. Nggawe sampeyan dhuwur mil, dhuwur banget, amarga dheweke duwe eseman internasional. Ana wong liyo ing ambenku, ana sing nggegirisi. Oh, ora. Ing urip liyane aku bakal nggawe sampeyan tetep. Amarga aku, aku bisa apa wae. Cocog kanggo perang mahkotaku. Digunakake kanggo nyolong omben-omben wong tuwa lan munggah menyang payon. Nada, tan pas lan siap, nguripake munggah amarga dadi abot. Tresnane kaya obat. Aku guess sing aku kelalen aku duwe pilihan.

Isi placeholder kanggo panel tab. Iki ana hubungane karo tab profil. Sampeyan entuk arsitektur paling apik. Perangko paspor, dheweke kosmopolitan. Apik, seger, galak, kita entuk kunci. Ora tau ngrancang yen sedina aku bakal kelangan sampeyan. Dheweke mangan atimu. Kiss sampeyan kosmik, saben gerakan iku sihir. Maksudku sing, maksudku kaya dheweke. Salam seduluran, ayo dolan. Mung duwe wengi kaya 4 Juli! Nanging sampeyan luwih seneng boroske.

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>

Kanggo nyukupi kabutuhan sampeyan, iki bisa digunakake karo <ul>markup adhedhasar, kaya sing dituduhake ing ndhuwur, utawa nganggo markup "muter dhewe" sing kasepakatan. Elinga yen sampeyan nggunakake <nav>, sampeyan ora kudu nambah role="tablist"langsung, amarga iki bakal ngganti peran asli unsur minangka landmark navigasi. Nanging, ngalih menyang unsur alternatif (ing conto ing ngisor iki, prasaja <div>) lan mbungkus <nav>watara.

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>

Plugin tab uga bisa digunakake karo pil.

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

Lan karo pil vertikal.

Isi placeholder kanggo panel tab. Iki ana hubungane karo tab ngarep. Saw you downtown singing the Blues. Nonton sampeyan ngubengi saluran. Yagene kowe ora nglilani aku mampir? Abot iku sirah sing nganggo makutha. Ya, kita nggawe malaekat nangis, udan mudhun ing bumi saka ndhuwur. Kepengin ndeleng acara ing 3D, film. Apa sampeyan tau ngrasa, rumangsa kertas tipis. Iku ya utawa ora, ora mungkin.

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>

Nggunakake atribut data

Sampeyan bisa ngaktifake navigasi tab utawa pil tanpa nulis JavaScript kanthi mung nemtokake data-toggle="tab"utawa data-toggle="pill"ing unsur. Gunakake atribut data iki ing .nav-tabsutawa .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>

Liwat JavaScript

Aktifake tab sing bisa tab liwat JavaScript (saben tab kudu diaktifake kanthi individu):

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

Sampeyan bisa ngaktifake tab individu kanthi sawetara cara:

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

Efek luntur

Kanggo nggawe tab ilang, tambahake .fademenyang saben .tab-pane. Panel tab pisanan uga kudu .shownggawe konten awal katon.

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

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

$().tab

Ngaktifake unsur tab lan wadhah konten. Tab kudu duwe data-targetutawa, yen nggunakake link, hrefatribut sing ngarahake simpul wadhah ing 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')

Milih tab sing diwenehake lan nuduhake panel sing gegandhengan. Tab liyane sing sadurunge dipilih dadi ora dipilih lan panel sing gegandhengan didhelikake. Bali menyang panelpon sadurunge panel tab bener-bener ditampilake (yaiku sadurunge shown.bs.tabkedadeyan kasebut).

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

.tab('buwang')

Numpes tab unsur.

Acara

Nalika nuduhake tab anyar, acara kasebut murub kanthi urutan ing ngisor iki:

hide.bs.tab(ing tab aktif saiki)
show.bs.tab(ing tab sing bakal ditampilake)
hidden.bs.tab(ing tab aktif sadurunge, padha karo hide.bs.tabacara kasebut)
shown.bs.tab(ing tab sing mentas aktif ditampilake, padha karo show.bs.tabacara kasebut)

Yen ora ana tab sing wis aktif, banjur acara hide.bs.tablan hidden.bs.tabora bakal dipecat.

Jinis Acara	Katrangan
show.bs.tab	Acara iki murub ing tab show, nanging sadurunge tab anyar wis ditampilake. Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
ditampilake.bs.tab	Acara iki murub ing tab show sawise tab ditampilake. Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
hide.bs.tab	Acara iki murub nalika tab anyar bakal ditampilake (lan kanthi mangkono tab aktif sadurunge bakal didhelikake). Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif saiki lan tab anyar sing bakal aktif.
hidden.bs.tab	Acara iki murub sawise tab anyar ditampilake (lan kanthi mangkono tab aktif sadurunge didhelikake). Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif sadurunge lan tab aktif anyar, mungguh.

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