in English

Navs

Cov ntaub ntawv thiab cov piv txwv rau kev siv Bootstrap cov khoom siv navigation.

Base nav

Kev taw qhia muaj nyob hauv Bootstrap qhia cov cim dav dav thiab cov qauv, los ntawm cov .navchav kawm hauv paus mus rau lub xeev nquag thiab tsis taus. Hloov cov chav kawm hloov pauv hloov ntawm txhua tus qauv.

Lub hauv paus .navtivthaiv yog tsim nrog flexbox thiab muab lub hauv paus muaj zog rau kev tsim txhua yam ntawm cov khoom siv navigation. Nws suav nrog qee qhov kev hloov pauv hloov pauv (rau kev ua haujlwm nrog cov npe), qee qhov txuas txuas rau thaj chaw loj dua, thiab cov qauv kev tsis taus yooj yim.

Lub hauv paus .navtivthaiv tsis suav nrog ib .activelub xeev. Cov piv txwv hauv qab no suav nrog cov chav kawm, feem ntau yog ua kom pom tias chav kawm tshwj xeeb no tsis ua rau muaj qhov tshwj xeeb styling. 
<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>

Cov chav kawm yog siv thoob plaws, yog li koj cov ntawv cim tuaj yeem hloov pauv tau yooj yim. Siv <ul>s zoo li saum toj no, <ol>yog tias qhov kev txiav txim ntawm koj cov khoom tseem ceeb, los yog yob koj tus kheej nrog ib lub <nav>caij. Vim tias kev .navsiv display: flex, cov kev sib txuas nav ua tib yam li cov khoom siv nav, tab sis tsis muaj qhov cim ntxiv.

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

Muaj cov qauv

Hloov cov style ntawm .navs tivthaiv nrog kev hloov kho thiab kev siv hluav taws xob. Sib tov thiab phim raws li xav tau, lossis tsim koj tus kheej.

Kab rov tav alignment

Hloov cov kab rov tav txoj kab nruab nrab ntawm koj lub nav nrog flexbox utilities . Los ntawm lub neej ntawd, navs yog sab laug, tab sis koj tuaj yeem hloov tau yooj yim rau nruab nrab lossis sab xis.

Centered nrog .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>

Right-aligned nrog .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>

Ntsug

Muab koj cov kev taw qhia los ntawm kev hloov cov khoom flex kev taw qhia nrog cov .flex-columnkhoom siv hluav taws xob. Yuav tsum tau muab lawv tso rau ntawm qee qhov chaw saib tab sis tsis yog lwm tus? Siv cov lus teb versions (piv txwv li, .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>

Raws li ib txwm muaj, ntsug navigation yog ua tau yam tsis muaj <ul>s, ib yam nkaus.

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

Tabs

Siv qhov yooj yim nav los ntawm saum toj no thiab ntxiv cov .nav-tabschav kawm los tsim ib lub tabbed interface. Siv lawv los tsim cov cheeb tsam tabbable nrog peb tab 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">Disabled</a>
  </li>
</ul>

Cov tshuaj

Siv tib yam HTML, tab sis siv .nav-pillshloov:

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

Sau thiab ua pov thawj

quab yuam koj .navcov ntsiab lus txuas ntxiv qhov dav muaj nyob hauv ib qho ntawm ob chav hloov kho. Yuav kom proportionately sau tag nrho cov chaw muaj nrog koj .nav-items, siv .nav-fill. Daim ntawv ceeb toom tias txhua qhov chaw kab rov tav yog nyob, tab sis tsis yog txhua qhov khoom nav muaj qhov dav tib yam.

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

Thaum siv ib <nav>-raws li kev taw qhia, koj tuaj yeem ua kom nyab xeeb tshem tawm .nav-itemraws li tsuas .nav-linkyog xav tau rau cov ntsiab lus styling <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>

Rau qhov sib npaug-dav, siv .nav-justified. Txhua qhov chaw kab rov tav yuav nyob ntawm qhov txuas nav, tab sis tsis zoo li cov .nav-fillsaum toj no, txhua yam khoom nav yuav yog tib qhov dav.

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

Zoo ib yam li qhov .nav-fillpiv txwv uas siv ib <nav>-based navigation.

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

Ua haujlwm nrog flex utilities

Yog tias koj xav tau cov kev hloov pauv hloov pauv, xav txog kev siv cov khoom siv hluav taws xob flexbox . Thaum hais lus ntau dua, cov khoom siv no muab kev hloov kho ntau dua hla cov ntsiab lus teb. Hauv qhov piv txwv hauv qab no, peb cov nav hia yuav muab tso rau ntawm qhov chaw qis tshaj plaws, tom qab ntawd hloov mus rau kab rov tav layout uas sau qhov dav muaj pib los ntawm qhov chaw me me.

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

Hais txog kev siv tau

Yog tias koj siv navs los muab lub bar navigation, nco ntsoov ntxiv ib qho role="navigation"rau lub thawv niam txiv lub ntsiab lus tshaj plaws ntawm <ul>, lossis qhwv ib lub <nav>caij nyob ib ncig ntawm tag nrho cov navigation. Tsis txhob ntxiv lub luag haujlwm rau <ul>nws tus kheej, vim qhov no yuav tiv thaiv nws los ntawm kev tshaj tawm raws li cov npe tiag tiag los ntawm kev pabcuam thev naus laus zis.

Nco ntsoov tias cov bars navigation, txawm tias pom kev zoo li tabs nrog cov .nav-tabschav kawm, yuav tsum tsis txhob muab role="tablist", role="tab"lossis role="tabpanel"cov cwj pwm. Cov no tsuas yog tsim nyog rau dynamic tabbed interfaces, raws li tau piav qhia hauv ARIA Authoring Practices Guide tabs qauv . Saib JavaScript tus cwj pwm rau dynamic tabbed interfaces hauv seem no piv txwv.

Siv cov dropdowns

Ntxiv dropdown menus nrog me ntsis ntxiv HTML thiab dropdowns JavaScript plugin .

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

Cov tshuaj nrog 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>

JavaScript cwj pwm

Siv lub tab JavaScript plugin - suav nrog nws tus kheej lossis los ntawm cov ntaub ntawv sau ua ke bootstrap.js- txhawm rau txuas ntxiv peb cov tab thiab cov ntsiav tshuaj los tsim cov tabbable panes ntawm cov ntsiab lus hauv zos.

Yog tias koj tab tom tsim peb JavaScript los ntawm qhov chaw, nws xav tauutil.js .

Dynamic tabbed interfaces, raws li tau piav nyob rau hauv ARIA Authoring Practices Guide tabs qauv , xav tau role="tablist", role="tab", role="tabpanel", thiab cov aria-cwj pwm ntxiv txhawm rau txhawm rau nthuav qhia lawv cov qauv, kev ua haujlwm thiab lub xeev tam sim no rau cov neeg siv cov thev naus laus zis (xws li cov neeg nyeem ntawv tshuaj ntsuam). Raws li qhov kev coj ua zoo tshaj plaws, peb pom zoo kom siv <button>cov ntsiab lus rau cov tabs, vim tias cov no yog cov kev tswj hwm uas ua rau muaj kev hloov pauv hloov pauv, tsis yog cov txuas uas mus rau nplooj ntawv tshiab lossis qhov chaw.

Nco ntsoov tias tab JavaScript plugin tsis txhawb tabbed interfaces uas muaj dropdown menus, vim cov no ua rau ob qho tib si usability thiab accessibility teeb meem. Los ntawm kev pom kev siv tau, qhov tseeb tias tam sim no tab tom nthuav tawm lub ntsiab lus tsis pom tam sim ntawd (raws li nws nyob hauv cov ntawv qhia zaub mov kaw) tuaj yeem ua rau tsis meej pem. Los ntawm qhov kev nkag mus tau zoo, tam sim no tsis muaj txoj hauv kev zoo los piav qhia qhov kev tsim kho no rau tus qauv WAI ARIA tus qauv, txhais tau tias nws tsis tuaj yeem nkag siab yooj yim rau cov neeg siv cov cuab yeej pabcuam.

Placeholder cov ntsiab lus rau lub tab vaj huam sib luag. Qhov no muaj feem xyuam rau lub tsev tab. Coj koj mais siab, siab heev, 'ua rau nws tau txais qhov ntawd thoob ntiaj teb luag nyav. Muaj ib tug neeg txawv ntawm kuv lub txaj, muaj pounding hauv kuv taub hau. Auj, tsis muaj. Hauv lwm lub neej kuv yuav ua rau koj nyob. 'Ua rau kuv, kuv muaj peev xwm ua tau txhua yam. Suit rau kuv lub crowning sib ntaus sib tua. Siv los nyiag koj niam koj txiv cawv thiab nce mus saum ru tsev. Tone, tan haum thiab npaj, tig nws ua rau nws hnyav hnyav. Nws txoj kev hlub zoo li tshuaj. Kuv twv tias kuv tsis nco qab kuv muaj kev xaiv.

Placeholder cov ntsiab lus rau lub tab vaj huam sib luag. Qhov no muaj feem xyuam rau qhov profile tab. Koj tau txais qhov zoo tshaj plaws architecture. Passport stamps, nws yog cosmopolitan. Zoo, tshiab, tsiv, peb tau txais nws ntawm xauv. Tsis tau npaj tias muaj ib hnub kuv yuav plam koj. Nws noj koj lub siab tawm. Koj hnia yog cosmic, txhua qhov txav yog khawv koob. Kuv txhais tau tias, Kuv txhais tau tias zoo li nws yog tus. Nyob zoo cov phooj ywg peb mus ncig ua si. Tsuas yog muaj hmo ntuj zoo li lub Xya Hli 4! Tab sis koj xav tau nkim sij hawm.

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>

Txhawm rau pab kom haum koj cov kev xav tau, qhov no ua haujlwm nrog <ul>-based markup, raws li qhia saum toj no, lossis nrog kev txiav txim siab "yob koj tus kheej" markup. Nco ntsoov tias yog tias koj siv <nav>, koj yuav tsum tsis txhob ntxiv role="tablist"ncaj qha rau nws, vim qhov no yuav dhau los ntawm lub luag haujlwm ntawm lub luag haujlwm ua ib qho chaw navigation. Hloov chaw, hloov mus rau lwm lub caij (hauv qhov piv txwv hauv qab no, ib qho yooj yim <div>) thiab qhwv <nav>ib ncig ntawm nws.

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

Tabs plugin kuj ua haujlwm nrog tshuaj.

Placeholder cov ntsiab lus rau lub tab vaj huam sib luag. Qhov no muaj feem xyuam rau lub tsev tab. Coj koj mais siab, siab heev, 'ua rau nws tau txais qhov ntawd thoob ntiaj teb luag nyav. Muaj ib tug neeg txawv ntawm kuv lub txaj, muaj pounding hauv kuv taub hau. Auj, tsis muaj. Hauv lwm lub neej kuv yuav ua rau koj nyob. 'Ua rau kuv, kuv muaj peev xwm ua tau txhua yam. Suit rau kuv lub crowning sib ntaus sib tua. Siv los nyiag koj niam koj txiv cawv thiab nce mus saum ru tsev. Tone, tan haum thiab npaj, tig nws ua rau nws hnyav hnyav. Nws txoj kev hlub zoo li tshuaj. Kuv twv tias kuv tsis nco qab kuv muaj kev xaiv.

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>

Thiab nrog cov tshuaj ntsug.

Placeholder cov ntsiab lus rau lub tab vaj huam sib luag. Qhov no muaj feem xyuam rau lub tsev tab. Pom koj hauv plawv nroog hu nkauj Blues. Saib koj ncig lub qhov dej. Ua cas koj tsis cia kuv tso tseg? Hnyav yog lub taub hau uas hnav lub kaus mom. Yog lawm, peb ua cov tim tswv quaj, los nag los rau hauv lub ntiaj teb los saum toj no. Xav pom cov yeeb yam hauv 3D, ua yeeb yaj kiab. Koj puas xav tias, xav tias daim ntawv nyias. Nws yog ib tug yog los yog tsis, tsis tej zaum.

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>

Siv cov ntaub ntawv tus cwj pwm

Koj tuaj yeem qhib lub tab lossis ntsiav tshuaj navigation yam tsis tau sau ib qho JavaScript los ntawm kev qhia yooj yim data-toggle="tab"lossis data-toggle="pill"ntawm lub ntsiab lus. Siv cov ntaub ntawv tus cwj pwm ntawm .nav-tabslossis .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>

Ntawm JavaScript

Qhib tabbable tabs ntawm JavaScript (txhua tab yuav tsum tau qhib ib tus zuj zus):

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

Koj tuaj yeem qhib ib tus neeg tab hauv ntau txoj hauv kev:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab

Fade nyhuv

Txhawm rau ua kom cov tabs ploj mus, ntxiv .faderau txhua qhov .tab-pane. Thawj tab pane yuav tsum tau .showua kom pom cov ntsiab lus thawj zaug.

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

Cov txheej txheem

Asynchronous txoj kev thiab kev hloov

Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .

Saib peb cov ntaub ntawv JavaScript kom paub ntau ntxiv .

$().tab

Activates lub tab element thiab cov ntsiab lus ntim. Tab yuav tsum muaj ib data-targetlossis, yog tias siv qhov txuas, tus hrefcwj pwm tsom rau lub thawv ntim hauv 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')

Xaiv qhov muab tab thiab qhia nws cov kab sib txuas. Lwm lub tab uas tau xaiv yav dhau los yuav tsis raug xaiv thiab nws cov pane cuam tshuam tau muab zais. Rov qab mus rau tus neeg hu ua ntej lub tab pane tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.tabxwm txheej tshwm sim).

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

.tab('tso')

Ua kom puas lub ntsiab tab.

Cov xwm txheej

Thaum pom ib lub tab tshiab, cov xwm txheej hluav taws kub hauv qhov kev txiav txim hauv qab no:

  1. hide.bs.tab(ntawm lub tab active tam sim no)
  2. show.bs.tab(ntawm qhov yuav tsum tau qhia tab)
  3. hidden.bs.tab(nyob rau yav dhau los active tab, tib yam li rau qhov hide.bs.tabkev tshwm sim)
  4. shown.bs.tab(ntawm lub tab tshiab uas nyuam qhuav tshwm sim, tib yam li rau qhov show.bs.tabkev tshwm sim)

Yog tias tsis muaj tab twb ua haujlwm lawm, ces cov xwm txheej hide.bs.tabthiab hidden.bs.tabcov xwm txheej yuav tsis raug rho tawm haujlwm.

Hom xwm txheej Kev piav qhia
show.bs.tab Qhov kev tshwm sim no tua hluav taws ntawm tab qhia, tab sis ua ntej tab tshiab tau tshwm sim. Siv event.targetthiab event.relatedTargettsom rau lub tab active thiab yav dhau los active tab (yog tias muaj) feem.
ua.bs.tab Qhov kev tshwm sim no tua hluav taws ntawm tab qhia tom qab tau pom tab. Siv event.targetthiab event.relatedTargettsom rau lub tab active thiab yav dhau los active tab (yog tias muaj) feem.
hide.bs.tab Qhov kev tshwm sim no tua hluav taws thaum lub tab tshiab yuav tsum tau tshwm sim (thiab yog li lub tab yav dhau los yuav tsum tau muab zais). Siv event.targetthiab event.relatedTargettsom rau cov tab tam sim no thiab cov tshiab sai sai-rau-yuav-ua haujlwm tab, feem.
hidden.bs.tab Qhov kev tshwm sim no tshwm sim tom qab lub tab tshiab tau tshwm sim (thiab yog li lub tab active yav dhau los tau muab zais). Siv event.targetthiab event.relatedTargettsom mus rau lub tab active yav dhau los thiab cov tshiab tab tshiab, raws li. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})