in English

Navs

Documentation sy ohatra momba ny fampiasana ireo singa fitetezana ao amin'ny Bootstrap.

Base nav

Ny fitetezana hita ao amin'ny Bootstrap dia mizara marika sy fomba ankapobeny, manomboka amin'ny .navkilasy fototra ka hatrany amin'ny fanjakana mavitrika sy kilemaina. Ampifamadiho ny kilasy modifier mba hifindra eo amin'ny fomba tsirairay.

Ny .navsinga fototra dia naorina tamin'ny flexbox ary manome fototra mafy orina amin'ny fananganana karazana singa rehetra amin'ny navigateur. Ao anatin'izany ny fanodinkodinana fomba sasany (amin'ny fiasana amin'ny lisitra), ny fametahana rohy sasany ho an'ny faritra voadona lehibe kokoa, ary ny fanaingoana fototra kilemaina.

Ny .navsinga fototra dia tsy ahitana .activefanjakana. Ireto ohatra manaraka ireto dia ahitana ny kilasy, indrindra indrindra mba hampisehoana fa ity kilasy manokana ity dia tsy miteraka fanaingoana manokana. 
<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>

Ampiasaina manerana ny kilasy ny kilasy, noho izany dia mety ho malefaka be ny marikao. Ampiasao <ul>ny s toy ny etsy ambony, <ol>raha zava-dehibe ny filaharan'ireo entanao, na manodina ny anao amin'ny <nav>singa iray. Satria ny .navfampiasana display: flex, ny rohy nav dia mitovy amin'ny zavatra nav, fa tsy misy marika fanampiny.

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

Fomba misy

Hanova ny endriky ny .navsinga s miaraka amin'ny modifiers sy utility. Afangaro ary ampifanaraho araka izay ilaina, na manangana anao manokana.

Fandrindrana marindrano

Ovay ny fampifanarahana marindrano amin'ny nav anao amin'ny fitaovana flexbox . Amin'ny alàlan'ny default, ny navs dia mirindra havia, saingy azonao atao ny manova azy ireo mora foana ho afovoany na havanana.

Foibe miaraka amin'ny .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>

Mifanaraka tsara amin'ny .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>

mijidina

Atsangano ny fitetezanao amin'ny alàlan'ny fanovana ny làlan'ny singa flex miaraka amin'ny .flex-columnfitaovana. Mila manangana azy ireo amin'ny toerana fijery sasany fa tsy ny hafa? Ampiasao ny dikan-teny mamaly (oh, .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>

Toy ny mahazatra, azo atao ny navigateur mitsangana tsy misy <ul>s ihany koa.

<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

Maka ny nav fototra avy any ambony ary manampy ny .nav-tabskilasy hamoronana interface tsara misy tabilao. Ampiasao izy ireo mba hamoronana faritra misy tabilao miaraka amin'ny 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>

levitra

Raiso io HTML io ihany, fa ampiasao .nav-pillskosa:

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

Fenoy ary manamarina

Manery ny .navatiny hanitarana ny sakany feno iray amin'ireo kilasy modifier roa. Mba hamenoana ny habaka rehetra misy amin'ny .nav-items anao, ampiasao ny .nav-fill. Mariho fa ny habaka marindrano rehetra dia mipetraka, fa tsy ny singa nav rehetra dia mitovy ny sakany.

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

Rehefa mampiasa <nav>navigateur mifototra ianao, dia azonao atao ny manaisotra tsara .nav-itemsatria .nav-linkilaina amin'ny <a>singa fanaingoana.

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

Ho an'ny singa mitovy sakany dia ampiasao .nav-justified. Ny habaka marindrano rehetra dia hofehezin'ny rohy nav, fa tsy toy ny .nav-filletsy ambony, ny singa nav rehetra dia hitovy ny sakany.

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

Mitovy amin'ny .nav-fillohatra mampiasa <nav>navigateur mifototra.

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

Miasa amin'ny flex utility

Raha mila fiovaovan'ny nav mamaly ianao dia diniho ny fampiasana andiana fitaovana flexbox . Na dia mibaribary kokoa aza, ireo fitaovana ireo dia manolotra fanasokajiana bebe kokoa amin'ireo teboka fiatoana mamaly. Ao amin'ny ohatra etsy ambany, ny nav-ntsika dia hapetraka eo amin'ny teboka farany ambany indrindra, avy eo ampifanaraho amin'ny lamina marindrano izay mameno ny sakany misy manomboka amin'ny teboka kely.

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

Momba ny accessibility

Raha mampiasa navs ianao mba hanomezana bara fitetezana, aza hadino ny manampy a role="navigation"amin'ny fitoeran'ny ray aman-dreny lojika indrindra amin'ny <ul>, na manarona <nav>singa iray manodidina ny fitetezana manontolo. Aza ampidirina amin'ny <ul>tenany ny andraikitra, satria izany dia hanakana azy tsy hambara ho lisitra tena izy amin'ny alàlan'ny teknolojia manampy.

Mariho fa ny bar navigation, na dia natao ho toy ny tabilao miaraka amin'ny .nav-tabskilasy aza, dia tsy tokony homena role="tablist", role="tab"na role="tabpanel"toetra. Ireo dia mety ho an'ny interface dynamic tabbed ihany, araka ny voalaza ao amin'ny ARIA Authoring Practices Guide tabs patterns . Jereo ny fitondran-tena JavaScript ho an'ny seha-pifandraisana mavitrika amin'ity fizarana ity ho ohatra.

Mampiasa dropdowns

Ampio ny menio midina miaraka amin'ny HTML fanampiny kely sy ny plugin JavaScript dropdowns .

Kiheba misy fidinana

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

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

Fihetsika JavaScript

Ampiasao ny plugin JavaScript kiheba—ampidiro tsirairay izany na amin'ny alalan'ny bootstrap.jsrakitra natambatra—mba hanitarana ny tabilao sy pills navigateur mba hamoronana takelaka misy tabilao misy ny atiny eo an-toerana.

Raha manorina ny JavaScript avy amin'ny loharano ianao dia mitakyutil.js .

Ny interface dynamic tabbed, araka ny voalaza ao amin'ny ARIA Authoring Practices Guide tabs patterns , dia mitaky role="tablist", role="tab", role="tabpanel", ary aria-toetra fanampiny mba hampitana ny rafitra, ny fiasany ary ny toetrany amin'izao fotoana izao amin'ireo mpampiasa ny teknolojia manampy (toy ny mpamaky efijery). Amin'ny maha fanao tsara indrindra, dia manoro hevitra ny fampiasana <button>singa ho an'ny tabilao izahay, satria ireo dia fanaraha-maso izay miteraka fiovana mavitrika, fa tsy rohy mandeha amin'ny pejy na toerana vaovao.

Mariho fa ny plugin JavaScript kiheba dia tsy mahazaka interface tsara misy tabilao misy menio midina, satria miteraka olana amin'ny fampiasana sy ny fidirana. Avy amin'ny fomba fijery azo ampiasaina, mety hiteraka fisavoritahana ny hoe tsy hita avy hatrany ny singa trigger an'ny kiheba aseho amin'izao fotoana izao (satria ao anatin'ny menio midina mihidy). Amin'ny fomba fijery azo idirana, tsy misy fomba azo saina amin'izao fotoana izao hanoratana an'io karazana fanorenana io amin'ny lamina WAI ARIA mahazatra, midika izany fa tsy mora azo amin'ny mpampiasa ny teknolojia fanampiana izany.

Ny votoatin'ny placeholder ho an'ny takelaka tabilao. Ity iray ity dia mifandraika amin'ny tabilao an-trano. Mitondra anao any amin'ny kilaometatra avo, avo be, satria izy no manana an'io tsiky iraisam-pirenena io. Misy olon-tsy fantatra eo am-pandriako, misy donto ny lohako. Oh, tsia. Amin'ny fiainana hafa dia hataoko mijanona ianao. Satria izaho dia mahavita na inona na inona. Mifanaraka amin'ny ady satroboninahitra nataoko. Nangalatra ny toaka nataon’ny ray aman-dreninao sy nianika tafo. Tone, tan mety ary vonona, atsangano izy io fa mavesa-danja. Toy ny zava-mahadomelina ny fitiavany. Ataoko fa hadinoko fa nanana safidy aho.

Ny votoatin'ny placeholder ho an'ny takelaka tabilao. Ity iray ity dia mifandraika amin'ny tabilao profil. Nahazo ny maritrano tsara indrindra ianao. hajia pasipaoro, cosmopolitan izy. Tsara, vaovao, masiaka, azonay tamin'ny hidin-trano. Tsy nieritreritra mihitsy aho hoe ho very anao indray andro any. laniny ny fonao. Ny orokao dia cosmic, ny hetsika rehetra dia majika. Ny tiako holazaina dia ny tiako holazaina fa izy no ilay izy. Miarahaba havan-tiana andao hanao dia. Manana fotsiny ny alina toy ny 4 Jolay! Fa aleonao ho very maina.

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>

Mba hanampiana amin'ny zavatra ilainao, ity dia miasa miaraka amin'ny <ul>marika mifototra, araka ny aseho etsy ambony, na miaraka amin'ny marika "manodina ny anao manokana". Mariho fa raha mampiasa <nav>, ianao dia tsy tokony hanampy role="tablist"azy mivantana, satria izany dia hanaisotra ny andraikitry ny teratany ho toy ny mari-pamantarana fitetezana. Fa kosa, miverena amina singa iray hafa (amin'ny ohatra etsy ambany, tsotra <div>) ary aforeto ny <nav>manodidina azy.

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

Ny plugin tabs koa dia miasa miaraka amin'ny pilina.

Ny votoatin'ny placeholder ho an'ny takelaka tabilao. Ity iray ity dia mifandraika amin'ny tabilao an-trano. Mitondra anao any amin'ny kilaometatra avo, avo be, satria izy no manana an'io tsiky iraisam-pirenena io. Misy olon-tsy fantatra eo am-pandriako, misy donto ny lohako. Oh, tsia. Amin'ny fiainana hafa dia hataoko mijanona ianao. Satria izaho dia mahavita na inona na inona. Mifanaraka amin'ny ady satroboninahitra nataoko. Nangalatra ny toaka nataon’ny ray aman-dreninao sy nianika tafo. Tone, tan mety ary vonona, atsangano izy io fa mavesa-danja. Toy ny zava-mahadomelina ny fitiavany. Ataoko fa hadinoko fa nanana safidy aho.

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>

Ary miaraka amin'ny pilina mitsangana.

Ny votoatin'ny placeholder ho an'ny takelaka tabilao. Ity iray ity dia mifandraika amin'ny tabilao an-trano. Nahita anao tao afovoan-tanàna nihira ny Blues. Jereo ianao manodidina ny tatatra. Nahoana aho no tsy avelanao hijanona? Mavesatra ny loha mitondra ny satroboninahitra. Eny, mampitomany anjely isika, milatsaka amin’ny tany avy any ambony. Te-hijery ny fampisehoana amin'ny 3D, sarimihetsika. Moa ve ianao mahatsapa, mahatsiaro tena manify taratasy. Eny na tsia, tsia angamba.

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>

Mampiasa ny angona toetra

Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra JavaScript amin'ny alalan'ny famaritana fotsiny data-toggle="tab"na data-toggle="pill"amin'ny singa iray. Ampiasao amin'ny .nav-tabsna .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>

Amin'ny JavaScript

Alefaso amin'ny alalan'ny JavaScript ny kiheba azo vakiana (mila ampihetsika tsirairay ny tabilao tsirairay):

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

Azonao atao ny manetsika ny tabilao tsirairay amin'ny fomba maro:

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

Mba hahatonga ny tabilao ho levona, ampio .fadeny tsirairay .tab-pane. Ny takelaka tabilao voalohany dia tsy maintsy .showmanao ny atiny voalohany ho hita ihany koa.

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

fomba

Fomba sy fifindrana asynchronous

Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .

$().tab

Mampihetsika singa kiheba sy fitoeran'ny atiny. Ny tabilao dia tokony hanana data-targetna, raha mampiasa rohy, hreftoetra iray mikendry ny node container ao amin'ny 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')

Mifidy ny kiheba nomena ary mampiseho ny tontonana mifandray aminy. Izay kiheba hafa izay nofantenana teo aloha dia lasa tsy voafantina ary nafenina ny tontonana mifandraika aminy. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny takelaka tabilao (izany hoe alohan'ny shown.bs.tabnitrangan'ny hetsika).

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

.tab('manary')

Manimba ny tabilao misy singa.

zava-mitranga

Rehefa mampiseho kiheba vaovao dia miredareda toy izao manaraka izao ny hetsika:

  1. hide.bs.tab(amin'ny tabilao mavitrika ankehitriny)
  2. show.bs.tab(eo amin'ny tabilao haseho)
  3. hidden.bs.tab(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'ny hide.bs.tabhetsika)
  4. shown.bs.tab(eo amin'ny tabilao vao naseho vao mavitrika, mitovy amin'ny an'ny show.bs.tabhetsika)

Raha tsy misy kiheba efa navitrika dia tsy ho voaroaka ny hetsika ary hide.bs.tab.hidden.bs.tab

Karazana hetsika Description
show.bs.tab Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao event.targetsy event.relatedTargetkendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
aseho.bs.tab Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao event.targetsy event.relatedTargetkendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
hide.bs.tab Mirehitra ity hetsika ity rehefa misy kiheba vaovao haseho (ary noho izany dia afenina ny kiheba mavitrika teo aloha). Ampiasao event.targetsy event.relatedTargetkendrena ny tabilao mavitrika ankehitriny sy ny tabilao vaovao tsy ho ela.
hidden.bs.tab Mirehitra ity hetsika ity rehefa miseho ny tabilao vaovao (ary noho izany dia afenina ny tabilao mavitrika teo aloha). Ampiasao event.targetsy event.relatedTargetikendrena ny tabilao mavitrika teo aloha sy ny tabilao mavitrika vaovao. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})