in English

Navs

Iwe ati awọn apẹẹrẹ fun bi o ṣe le lo Bootstrap pẹlu awọn paati lilọ kiri.

Nav mimọ

Lilọ kiri ni Bootstrap pin isamisi gbogbogbo ati awọn aza, lati .navkilasi ipilẹ si awọn ipinlẹ ti nṣiṣe lọwọ ati alaabo. Yipada awọn kilasi modifier lati yipada laarin ara kọọkan.

A ṣe ipilẹ .navpaati ipilẹ pẹlu flexbox ati pese ipilẹ to lagbara fun kikọ gbogbo awọn iru awọn paati lilọ kiri. O pẹlu diẹ ninu awọn ifasilẹ ara (fun ṣiṣẹ pẹlu awọn atokọ), diẹ ninu awọn padding ọna asopọ fun awọn agbegbe to buruju nla, ati aṣa alaabo ipilẹ.

Ẹya ipilẹ .navko pẹlu eyikeyi .activeipinle. Awọn apẹẹrẹ atẹle pẹlu kilasi naa, ni pataki lati ṣafihan pe kilasi kan pato ko ṣe okunfa eyikeyi iselona pataki. 
<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>

Awọn kilasi ni a lo jakejado, nitorinaa isamisi rẹ le rọ pupọ. Lo <ul>s bii loke, <ol>ti aṣẹ awọn nkan rẹ ba ṣe pataki, tabi yi tirẹ pẹlu <nav>eroja kan. Nitori awọn .navlilo display: flex, awọn ọna asopọ nav huwa kanna bi awọn ohun nav yoo ṣe, ṣugbọn laisi ami iyasọtọ.

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

Awọn aṣa ti o wa

Yi awọn ara ti .navs paati pẹlu modifiers ati igbesi. Illa ati baramu bi o ti nilo, tabi kọ ara rẹ.

Petele titete

Yi titete petele ti nav rẹ pẹlu awọn ohun elo flexbox . Nipa aiyipada, awọn navs ti wa ni ibamu si apa osi, ṣugbọn o le ni rọọrun yi wọn pada si aarin tabi titọ ọtun.

Aarin pẹlu .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>

Ni ibamu-ọtun pẹlu .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>

Inaro

Ṣe akopọ lilọ kiri rẹ nipa yiyipada itọsọna ohun kan Flex pẹlu ohun .flex-columnelo naa. Nilo lati akopọ wọn lori diẹ ninu awọn iwo oju ṣugbọn kii ṣe awọn miiran? Lo awọn ẹya idahun (fun apẹẹrẹ, .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>

Gẹgẹbi nigbagbogbo, lilọ kiri inaro ṣee ṣe laisi <ul>s, paapaa.

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

Awọn taabu

Mu awọn nav ipilẹ lati oke ati afikun .nav-tabskilasi lati se ina kan tabbed ni wiwo. Lo wọn lati ṣẹda awọn agbegbe tabbable pẹlu wa taabu JavaScript itanna .

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

Awọn oogun

Mu HTML kanna, ṣugbọn lo .nav-pillsdipo:

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

Kun ati ki o da

Fi ipa mu .navawọn akoonu inu rẹ lati faagun ni kikun iwọn ti o wa ọkan ninu awọn kilasi modifier meji. Lati kun gbogbo aaye to wa ni iwọn pẹlu .nav-items rẹ, lo .nav-fill. Akiyesi pe gbogbo petele aaye ti wa ni ti tẹdo, sugbon ko gbogbo nav ohun kan ni o ni kanna iwọn.

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

Nigbati o ba nlo <nav>lilọ kiri-orisun, o le yọkuro lailewu .nav-itembi o ṣe .nav-linknilo nikan fun <a>awọn eroja aṣ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>

Fun awọn eroja iwọn dogba, lo .nav-justified. Gbogbo aaye petele yoo gba nipasẹ awọn ọna asopọ nav, ṣugbọn ko dabi .nav-fillloke, gbogbo ohun nav yoo jẹ iwọn kanna.

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

Iru si .nav-fillapẹẹrẹ nipa lilo <nav>lilọ-orisun.

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

Nṣiṣẹ pẹlu Flex igbesi

Ti o ba nilo awọn iyatọ nav idahun, ronu nipa lilo lẹsẹsẹ awọn ohun elo flexbox . Lakoko ti ọrọ-ọrọ diẹ sii, awọn ohun elo wọnyi nfunni ni isọdi nla kọja awọn aaye ifasilẹ idahun. Ni awọn apẹẹrẹ ni isalẹ, nav wa yoo wa ni tolera lori awọn ni asuwon ti breakpoint, ki o si orisirisi si si a petele akọkọ ti o kun awọn iwọn ti o wa ti o bere lati kekere 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="#">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>

Nipa wiwọle

Ti o ba nlo awọn navs lati pese ọpa lilọ kiri, rii daju lati ṣafikun kan role="navigation"si apoti obi ti oye julọ ti <ul>, tabi fi ipari si ohun <nav>kan ni ayika gbogbo lilọ kiri. Maṣe ṣafikun ipa naa si <ul>funrararẹ, nitori eyi yoo ṣe idiwọ lati kede bi atokọ gangan nipasẹ awọn imọ-ẹrọ iranlọwọ.

Ṣe akiyesi pe awọn ọpa lilọ kiri, paapaa ti oju ba ṣe aṣa bi awọn taabu pẹlu .nav-tabskilasi, ko yẹ ki o fun role="tablist", role="tab"tabi role="tabpanel"awọn abuda. Iwọnyi jẹ deede nikan fun awọn atọkun tabbed ti o ni agbara, bi a ti ṣe apejuwe rẹ ninu ilana Awọn ilana Awọn adaṣe Onkọwe ARIA . Wo JavaScript ihuwasi fun ìmúdàgba tabbed atọkun ni yi apakan fun apẹẹrẹ.

Lilo awọn dropdowns

Ṣafikun awọn akojọ aṣayan silẹ pẹlu HTML afikun diẹ ati awọn ohun itanna JavaScript awọn silẹ .

Awọn taabu pẹlu 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>

Ìşọmọbí pẹlu 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 ihuwasi

Lo ohun itanna JavaScript taabu-pẹlu ẹyọkan tabi nipasẹ akojọpọbootstrap.js faili ti a ṣajọpọ—lati faagun awọn taabu lilọ kiri wa ati awọn oogun lati ṣẹda awọn pane ti akoonu agbegbe.

Ti o ba n kọ JavaScript wa lati orisun, o niloutil.js .

Awọn atọkun taabu ti o ni agbara, gẹgẹ bi a ti ṣe apejuwe rẹ ninu ARIA Awọn ilana Itọsọna Awọn adaṣe Akọwe , nilo role="tablist", role="tab", role="tabpanel", ati awọn abuda afikun aria-lati le sọ eto wọn, iṣẹ ṣiṣe ati ipo lọwọlọwọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ (gẹgẹbi awọn oluka iboju). Gẹgẹbi iṣe ti o dara julọ, a ṣeduro lilo <button>awọn eroja fun awọn taabu, nitori iwọnyi jẹ awọn idari ti o nfa iyipada agbara, dipo awọn ọna asopọ ti o lọ kiri si oju-iwe tuntun tabi ipo.

Ṣe akiyesi pe ohun itanna taabu JavaScript ko ṣe atilẹyin awọn atọkun taabu ti o ni awọn akojọ aṣayan silẹ, nitori iwọnyi fa mejeeji lilo ati awọn ọran iraye si. Lati irisi lilo, otitọ pe eroja okunfa taabu ti o han lọwọlọwọ ko han lẹsẹkẹsẹ (bi o ti wa ninu akojọ aṣayan silẹ pipade) le fa iporuru. Lati oju iwoye wiwọle, lọwọlọwọ ko si ọna ti o ni oye lati ṣe maapu iru ikole yii si apẹrẹ WAI ARIA boṣewa, afipamo pe ko le ṣe ni irọrun ni oye si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ.

Akoonu ibi ipamọ fun nronu taabu. Eyi jẹ ibatan si taabu ile. O gba ọ ni awọn maili ga, giga ga, nitori pe o ni ẹrin kariaye kan yẹn. Alejo kan wa lori ibusun mi, o n lu mi ni ori. Oh, rara. Ni igbesi aye miiran Emi yoo jẹ ki o duro. Nitori emi, Mo wa lagbara ti ohunkohun. Ti o baamu fun ogun ade mi. Ti a lo lati ji ọti ti awọn obi rẹ ati gun oke orule. Ohun orin, Tan fit ati ki o setan, tan o soke fa awọn oniwe-gettin 'eru. Ifẹ rẹ dabi oogun. Mo gboju le won pe mo ti gbagbe Mo ni yiyan.

Akoonu ibi ipamọ fun nronu taabu. Eyi ni ibatan si taabu profaili. O ni awọn dara julọ faaji. Awọn ontẹ iwe irinna, o ni agba aye. Dara, alabapade, imuna, a ni lori titiipa. Maṣe gbero pe ni ọjọ kan Emi yoo padanu rẹ. O jẹ ọkan rẹ jade. Ifẹnukonu rẹ jẹ agba aye, gbogbo gbigbe jẹ idan. Mo tumọ si awọn, Mo tumọ si pe oun ni ọkan. Ẹ kí àwọn olólùfẹ́ ẹ jẹ́ kí a rìnrìn àjò. Kan ni alẹ bi 4th ti Keje! Sugbon o yoo kuku gba asan.

Akoonu ibi ipamọ fun nronu taabu. Eyi jẹ ibatan si taabu olubasọrọ. Ifẹ rẹ dabi oogun. Gbogbo mi odomobirin ojoun Chanel omo. Ni a Ile itura ati ki o kọ a Fort jade ti sheets. Nitoripe oun ni musiọmu ati olorin. (Bawo ni a ṣe n ṣe) Nitorina o fẹ ṣere pẹlu idan. Nitorinaa rii daju ṣaaju ki o to fi gbogbo rẹ fun mi. Mo n rin, Mo n rin lori afẹfẹ (alẹ oni). Rekọja ọrọ naa, gbọ gbogbo rẹ, akoko lati rin rin. Mu u ti o ba le. Tita bi oyin Mo gba awọn ila mi.

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

Lati ṣe iranlọwọ lati baamu awọn iwulo rẹ, eyi n ṣiṣẹ pẹlu <ul>isamisi-orisun, bi a ṣe han loke, tabi pẹlu isamisi “yi tirẹ” lainidii. Ṣe akiyesi pe ti o ba nlo <nav>, o ko yẹ ki o ṣafikun role="tablist"taara si rẹ, nitori eyi yoo dojui ipa abinibi eroja bi ami-ilẹ lilọ kiri. Dipo, yipada si ohun elo miiran (ni apẹẹrẹ ni isalẹ, rọrun <div>) ki o fi ipari si ni <nav>ayika rẹ.

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

Awọn itanna awọn taabu tun ṣiṣẹ pẹlu awọn oogun.

Akoonu ibi ipamọ fun nronu taabu. Eyi jẹ ibatan si taabu ile. O gba ọ ni awọn maili ga, giga ga, nitori pe o ni ẹrin kariaye kan yẹn. Alejo kan wa lori ibusun mi, o n lu mi ni ori. Oh, rara. Ni igbesi aye miiran Emi yoo jẹ ki o duro. Nitori emi, Mo wa lagbara ti ohunkohun. Ti o baamu fun ogun ade mi. Ti a lo lati ji ọti ti awọn obi rẹ ati gun oke orule. Ohun orin, Tan fit ati ki o setan, tan o soke fa awọn oniwe-gettin 'eru. Ifẹ rẹ dabi oogun. Mo gboju le won pe mo ti gbagbe Mo ni yiyan.

Akoonu ibi ipamọ fun nronu taabu. Eyi ni ibatan si taabu profaili. O ni awọn dara julọ faaji. Awọn ontẹ iwe irinna, o ni agba aye. Dara, alabapade, imuna, a ni lori titiipa. Maṣe gbero pe ni ọjọ kan Emi yoo padanu rẹ. O jẹ ọkan rẹ jade. Ifẹnukonu rẹ jẹ agba aye, gbogbo gbigbe jẹ idan. Mo tumọ si awọn, Mo tumọ si pe oun ni ọkan. Ẹ kí àwọn olólùfẹ́ ẹ jẹ́ kí a rìnrìn àjò. Kan ni alẹ bi 4th ti Keje! Sugbon o yoo kuku gba asan.

Akoonu ibi ipamọ fun nronu taabu. Eyi jẹ ibatan si taabu olubasọrọ. Ifẹ rẹ dabi oogun. Gbogbo mi odomobirin ojoun Chanel omo. Ni a Ile itura ati ki o kọ a Fort jade ti sheets. Nitoripe oun ni musiọmu ati olorin. (Bawo ni a ṣe n ṣe) Nitorina o fẹ ṣere pẹlu idan. Nitorinaa rii daju ṣaaju ki o to fi gbogbo rẹ fun mi. Mo n rin, Mo n rin lori afẹfẹ (alẹ oni). Rekọja ọrọ naa, gbọ gbogbo rẹ, akoko lati rin rin. Mu u ti o ba le. Tita bi oyin Mo gba awọn ila mi.

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

Ati pẹlu inaro ìşọmọbí.

Akoonu ibi ipamọ fun nronu taabu. Eyi jẹ ibatan si taabu ile. Ri o aarin ilu orin awọn Blues. Wo ti o Circle sisan. Kilode ti o ko jẹ ki n duro? Eru ni ori ti o gbe ade. Bẹ́ẹ̀ ni, àwa ń mú kí àwọn áńgẹ́lì kígbe, tí òjò rọ̀ sórí ilẹ̀ ayé láti òkè wá. Fẹ lati wo ifihan ni 3D, fiimu kan. Ṣe o lero lailai, lero ki iwe tinrin. O jẹ bẹẹni tabi rara, rara boya.

Akoonu ibi ipamọ fun nronu taabu. Eyi ni ibatan si taabu profaili. O gba ọ ni awọn maili ga, giga ga, nitori pe o ni ẹrin kariaye kan yẹn. Alejo kan wa lori ibusun mi, o n lu mi ni ori. Oh, rara. Ni igbesi aye miiran Emi yoo jẹ ki o duro. Nitori emi, Mo wa lagbara ti ohunkohun. Ti o baamu fun ogun ade mi. Ti a lo lati ji ọti ti awọn obi rẹ ati gun oke orule. Ohun orin, Tan fit ati ki o setan, tan o soke fa awọn oniwe-gettin 'eru. Ifẹ rẹ dabi oogun. Mo gboju le won pe mo ti gbagbe Mo ni yiyan.

Akoonu ibi ipamọ fun nronu taabu. Eyi ni ibatan si taabu awọn ifiranṣẹ. O ni awọn dara julọ faaji. Awọn ontẹ iwe irinna, o ni agba aye. Dara, alabapade, imuna, a ni lori titiipa. Maṣe gbero pe ni ọjọ kan Emi yoo padanu rẹ. O jẹ ọkan rẹ jade. Ifẹnukonu rẹ jẹ agba aye, gbogbo gbigbe jẹ idan. Mo tumọ si awọn, Mo tumọ si pe oun ni ọkan. Ẹ kí àwọn olólùfẹ́ ẹ jẹ́ kí a rìnrìn àjò. Kan ni alẹ bi 4th ti Keje! Sugbon o yoo kuku gba asan.

Akoonu ibi ipamọ fun nronu taabu. Eyi ni ibatan si awọn eto taabu. Ifẹ rẹ dabi oogun. Gbogbo mi odomobirin ojoun Chanel omo. Ni a Ile itura ati ki o kọ a Fort jade ti sheets. Nitoripe oun ni musiọmu ati olorin. (Bawo ni a ṣe n ṣe) Nitorina o fẹ ṣere pẹlu idan. Nitorinaa rii daju ṣaaju ki o to fi gbogbo rẹ fun mi. Mo n rin, Mo n rin lori afẹfẹ (alẹ oni). Rekọja ọrọ naa, gbọ gbogbo rẹ, akoko lati rin rin. Mu u ti o ba le. Tita bi oyin Mo gba awọn ila mi.

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

Lilo awọn abuda data

O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa sisọ pato data-toggle="tab"tabi data-toggle="pill"lori nkan kan. Lo awọn abuda data wọnyi lori .nav-tabstabi .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>

Nipasẹ JavaScript

Mu awọn taabu taabu ṣiṣẹ nipasẹ JavaScript (taabu kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):

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

O le mu awọn taabu kọọkan ṣiṣẹ ni awọn ọna pupọ:

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

Ipa ipare

Lati jẹ ki awọn taabu rẹ wọ inu, ṣafikun .fadesi ọkọọkan .tab-pane. PAN taabu akọkọ gbọdọ tun ni .showlati jẹ ki akoonu ibẹrẹ han.

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

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

$().taabu

Mu eroja taabu ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-targettabi, ti o ba nlo ọna asopọ kan, hrefẹda ti o fojusi oju ipade apoti kan ninu 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>

.taabu('ifihan')

Yan taabu ti a fun ati ṣafihan PAN ti o somọ. Eyikeyi taabu miiran ti o ti yan tẹlẹ di aiyan ati pe iwe ti o somọ ti wa ni pamọ. Pada si olupe ṣaaju ki iwe taabu ti han gangan (ie ṣaaju ki shown.bs.tabiṣẹlẹ naa to waye).

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

.taabu('sọ')

Pa taabu eroja run.

Awọn iṣẹlẹ

Nigbati o ba nfihan taabu tuntun, awọn iṣẹlẹ ina ni ilana atẹle:

  1. hide.bs.tab(lori taabu lọwọ lọwọlọwọ)
  2. show.bs.tab(lori taabu ti yoo han)
  3. hidden.bs.tab(lori taabu ti nṣiṣe lọwọ iṣaaju, ọkan kanna fun hide.bs.tabiṣẹlẹ naa)
  4. shown.bs.tab(lori taabu ti o ṣẹṣẹ n ṣiṣẹ tuntun, ọkan kanna fun show.bs.tabiṣẹlẹ naa)

Ti ko ba si taabu ti ṣiṣẹ tẹlẹ, lẹhinna hide.bs.tabati awọn hidden.bs.tabiṣẹlẹ kii yoo jẹ ina.

Iṣẹlẹ Iru Apejuwe
fihan.bs.taabu Iṣẹlẹ yii ina lori ifihan taabu, ṣugbọn ṣaaju ki o to han taabu tuntun. Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.
han.bs.taabu Iṣẹlẹ yi ina lori ifihan taabu lẹhin ti a ti fi taabu kan han. Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.
tọju.bs.taabu Iṣẹlẹ yii n ṣiṣẹ nigbati taabu tuntun yoo han (ati nitorinaa taabu ti nṣiṣe lọwọ tẹlẹ ni lati farapamọ). Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ lọwọlọwọ ati taabu tuntun lai-lati-ṣiṣẹ, ni atele.
farasin.bs.taabu Iṣẹlẹ yii n tan lẹhin ti taabu tuntun ti han (ati nitorinaa taabu ti nṣiṣe lọwọ iṣaaju ti farapamọ). Lo event.targetati event.relatedTargetlati fojusi taabu ti nṣiṣe lọwọ iṣaaju ati taabu ti nṣiṣe lọwọ tuntun, lẹsẹsẹ. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})