I-Navs kunye neethebhu

Amaxwebhu kunye nemizekelo yendlela yokusebenzisa i-Bootstrap equkiweyo yezinto zokukhangela.

Kweli phepha

Isiseko nav

Ukukhangela kuyafumaneka kwiBootstrap yabelana ngokuphawulwa ngokubanzi kunye nezimbo, ukusuka kwisiseko .navseklasi ukuya kumazwe asebenzayo kunye nabakhubazekileyo. Tshintsha iiklasi zesilungisi ukutshintsha phakathi kwesimbo ngasinye.

Icandelo lesiseko .navlakhiwe nge-flexbox kwaye libonelela ngesiseko esomeleleyo sokwakha zonke iintlobo zezixhobo zokuhamba. Ibandakanya ezinye iindlela zokubhala ngaphezulu (zokusebenza ngezintlu), ezinye iikhonkco zekhonkco kwiindawo ezinkulu ezibethayo, kunye nesimbo esisisiseko sabakhubazekileyo.

Icandelo lesiseko .navalibandakanyi naliphi na .activeilizwe. Le mizekelo ilandelayo ibandakanya iklasi, ikakhulu ukubonisa ukuba le klasi ayiqalisi nasiphi na isimbo esikhethekileyo.

Ukuhambisa imo esebenzayo kubuchwephesha bokuncedisa, sebenzisa aria-currentuphawu — usebenzisa pageixabiso lephepha langoku, okanye trueinto yangoku kwiseti.

html

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Iiklasi zisetyenziswa kulo lonke, ngoko uphawu lwakho lunokuba bhetyebhetye kakhulu. Sebenzisa <ul>s like ngasentla, <ol>ukuba ulandelelwano izinto zakho kubalulekile, okanye roll eyakho nge <nav>element. Kuba .navusebenziso display: flex, amakhonkco e-nav aziphatha ngendlela efanayo nav izinto eziya kwenza, kodwa ngaphandle kophawulo olongezelelweyo.

html

<nav class="nav">
  <a class="nav-link active" aria-current="page" 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>

Izimbo ezikhoyo

Tshintsha isimbo .navs icandelo kunye modifiers kunye eziluncedo. Xuba kwaye utshatise njengoko kufuneka, okanye uzakhele eyakho.

Ulungelelwaniso oluthe tye

Guqula ulungelelwaniso oluthe tye lwe nav yakho ngezixhobo ze flexbox . Ngokungagqibekanga, ii-navs zilungelelaniswe ekhohlo, kodwa unokuzitshintsha ngokulula zibesembindini okanye zilungelelaniswe ekunene.

Isembindini nge .justify-content-center:

html

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Ilungelelaniswe ekunene ne .justify-content-end:

html

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Ngokuthe nkqo

Gcina ukukhangela kwakho ngokutshintsha isikhokelo sento eguqukayo kunye nezinto .flex-columneziluncedo. Ngaba kufuneka uzibeke kwezinye iindawo zokujonga kodwa hayi kwezinye? Sebenzisa iinguqulelo eziphendulayo (umz., .flex-sm-column).

html

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Njengesiqhelo, ukukhangela ngokuthe nkqo kunokwenzeka ngaphandle kwe <ul>-s, kwakhona.

html

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" 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>

Iithebhu

Ithatha i-nav esisiseko ukusuka phezulu kwaye yongeza .nav-tabsiklasi ukuvelisa ujongano olunesithuba. Zisebenzise ukwenza imimandla enokwenzeka ngethebhu yethu iplagi yeJavaScript .

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Iipilisi

Thatha kwaloo HTML inye, kodwa sebenzisa .nav-pillsendaweni yoko:

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Gcwalisa kwaye ugwebe

Nyanzelisa .navimixholo yakho ukwandisa ububanzi obukhoyo obugcweleyo kwiiklasi ezimbini zesilungisi. Ukugcwalisa ngokulinganayo yonke indawo ekhoyo ngeyakho .nav-item, sebenzisa .nav-fill. Qaphela ukuba yonke indawo ethe tye ihleli, kodwa ayizizo zonke izinto ze-nav ezinobubanzi obufanayo.

html

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Xa usebenzisa <nav>ukukhangela okusekwe, ungashiya ngokukhuselekileyo .nav-itemnjengoko .nav-linkkufuneka kuphela kwizinto zesitayile <a>.

html

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" 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>

Kwizinto ezinobubanzi obulinganayo, sebenzisa .nav-justified. Zonke isithuba esithe tyaba siya kuhlala ngamakhonkco e-nav, kodwa ngokungafaniyo .nav-fillnokungasentla, yonke into ye-nav iya kuba nobubanzi obufanayo.

html

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

Ngokufana .nav-fillnomzekelo usebenzisa <nav>ukukhangela okusekwe.

html

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" 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>

Ukusebenza ngezixhobo eziguqukayo

Ukuba ufuna ukusabela okwahluka kwe-nav, cinga ukusebenzisa uluhlu lwezinto eziluncedo ze- flexbox . Ngelixa i-verbose ngakumbi, ezi zixhobo zibonelela ngokwenziwa ngokwezifiso okukhulu kuzo zonke iindawo ezisabelayo. Kulo mzekelo ungezantsi, i-nav yethu iya kupakishwa kweyona ndawo isezantsi yoqhawulo, emva koko ilungelelanise ubeko oluthe tye olugcwalisa ububanzi obukhoyo ukusuka kwindawo encinci yokuphumla.

html

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" 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>

Ngokumalunga nokufikeleleka

Ukuba usebenzisa i-navs ukubonelela ngebar yokukhangela, qiniseka ukuba wongeza role="navigation"u-a kwesona sikhongozeli sinomzali sinengqiqo se-, <ul>okanye usonge into ethile kuhambo <nav>lonke. Musa ukongeza indima kuyo <ul>ngokwayo, njengoko oku kuya kuthintela ukuba ibhengezwe njengoluhlu lokwenyani ngobuchule bokuncedisa.

Qaphela ukuba iibar zokukhangela, nokuba zibukeka njenge tabhu kunye .nav-tabsnodidi, akufunekanga zinikwe role="tablist", role="tab"okanye role="tabpanel"iimpawu. Ezi zilungele kuphela ujongano oluguquguqukayo lwethebhu, njengoko kuchaziwe kwi- ARIA yoBugunyaziso bokuSebenza ipateni yeethebhu . Jonga ukuziphatha kweJavaScript yojongano oluguquguqukayo lwethebhu kweli candelo lomzekelo. Uphawu aria-currentloyelelwano aluyomfuneko kujongano oluguquguqukayo lwe tab ukususela ekubeni iJavaScript yethu iphethe imeko ekhethiweyo ngokongeza aria-selected="true"kwisithuba esisebenzayo.

Ukusebenzisa iidrophu

Yongeza iimenu ezihlayo nge-HTML encinci eyongezelelweyo kunye neplagi ye- JavaScript eyehlayo .

Iithebhu ezinokwehla

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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>

Iipilisi ezine dropdowns

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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>

CSS

Izinto eziguquguqukayo

Ifakwe kwi-v5.2.0

Njengenxalenye yokuguquguquka kweCSS yeBootstrap, ii-navs ngoku zisebenzisa iiguquguquko zeCSS zasekhaya kwi .nav, .nav-tabs, kunye .nav-pillsnokuphucula ukwenziwa kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

Kwiklasi .navyesiseko:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Kwiklasi .nav-tabsyesilungisi:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Kwiklasi .nav-pillsyesilungisi:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Iinguqu zeSass

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Ukuziphatha kweJavaScript

Sebenzisa i-plugin ye-JavaScript yethebhu-yibandakanye ngabanye okanye bootstrap.jsngefayile edibeneyo-ukwandisa iithebhu zethu zokuhamba kunye neepilisi ukwenza iipaneli ze-tableable zomxholo wendawo.

Lo ngomnye umxholo wesibambi-ndawo ithebhu yaseKhaya umxholo onxulumeneyo. Ukucofa enye isithuba kuya kuguqulela ukubonakala kwalena kwelandelayo. Ithebhu yeJavaScript itshintshanisa iindidi zokulawula ukubonakala komxholo kunye nesimbo. Ungayisebenzisa kunye neethebhu, iipilisi, kunye naluphi na olunye .navukukhangela okunamandla.

Lo ngomnye umxholo wesibambi-ndawo isiqulatho esinxulumene neProfayile yethebhu . Ukucofa enye isithuba kuya kuguqulela ukubonakala kwalena kwelandelayo. Ithebhu yeJavaScript itshintshanisa iindidi zokulawula ukubonakala komxholo kunye nesimbo. Ungayisebenzisa kunye neethebhu, iipilisi, kunye naluphi na olunye .navukukhangela okunamandla.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

Ukunceda ukulingana neemfuno zakho, oku kusebenza <ul>ngophawu olusekwe-, njengoko kubonisiwe ngasentla, okanye nangaluphi na uphawu olungenamkhethe "rola okwakho". Qaphela ukuba usebenzisa <nav>, akufuneki udibanise role="tablist"ngokuthe ngqo kuyo, njengoko oku kuya kubhala ngaphezulu indima yendalo yesiqalelo njengophawu lokukhangela lomhlaba. Endaweni yoko, tshintshela kwenye into (kumzekelo ongezantsi, elula <div>) kwaye uyisongele <nav>ngeenxa zonke.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Iplagi yeethebhu iphinda isebenze kunye neepilisi.

This is some placeholder content the Disabled tab's associated content.

<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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Kwaye ngeepilisi ezithe nkqo. Ngokufanelekileyo, kwiithebhu ezithe nkqo, kuya kufuneka udibanise aria-orientation="vertical"kwisikhongozeli soluhlu lwethebhu.

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Ukufikeleleka

Ujongano olunetheyibhile olunamandla, njengoko kuchaziwe kwi- ARIA yeethebhu zeSikhokelo sokuSebenzisa ukuBhalisa iithebhu , zifuna role="tablist", role="tab", role="tabpanel", kunye neempawu ezongezelelweyo aria-ukuze zigqithise ubume bazo, ukusebenza, kunye nemeko yangoku kubasebenzisi bobugcisa bokuncedisa (njengabafundi besikrini). Njengomsebenzi ogqwesileyo, sincoma ukusebenzisa <button>izinto zeethebhu, njengoko ezi zizilawuli ezibangela utshintsho oluguquguqukayo, kunezikhonkco eziya kwiphepha elitsha okanye indawo.

Ngokuhambelana nepatheni ye-ARIA yokuSebenzisa ukuBhalisa, kuphela ithebhu esebenzayo efumana ugxininiso lwebhodi yezitshixo. Xa iplagi yeJavaScript iqalwa, iya kusekwa tabindex="-1"kuzo zonke izilawuli zethebhu ezingasebenziyo. Nje ukuba ithebhu esebenzayo ngoku igxininise, izitshixo zekhesa zivule ithebhu yangaphambili/elandelayo, kunye neplagin itshintsha i- rovingtabindex ngokufanelekileyo. Nangona kunjalo, qaphela ukuba iplagi yeJavaScript ayahluli phakathi koluhlu lwethebhu ethe tye kunye nethe nkqo xa isiza kunxibelelwano lwesitshixo sekhesa: nokuba luluphi ulungelelwaniso loluhlu lwethebhu, zombini ikhesa ephezulu nasekhohlo iya kwithebhu yangaphambili, kwaye ezantsi nasekunene ikhesa yiya ku. ithebhu elandelayo.

Ngokubanzi, ukuququzelela ukukhangela kwebhodi yezitshixo, kuyacetyiswa ukuba wenze iiphaneli zesithuba ngokwazo ziqwalaseleke ngokunjalo, ngaphandle kokuba into yokuqala equlathe umxholo onentsingiselo ngaphakathi kwendawo yolawulo yethebhu sele iqwalaselwe. Iplagi yeJavaScript ayizami ukuphatha lo mba—apho kufanelekileyo, kuya kufuneka ukuba wenze iiphaneli zethebhu yakho zigxile ngokudibanisa kuphawu tabindex="0"lwakho.

Iplagi ye-JavaScript yesithuba ayiluxhasi ujongano olune tab equlathe iimenu ezihlayo, njengoko ezi zibangela zombini ukusetyenziswa kunye nemiba yofikelelo. Ukusuka kwimbono yokusebenziseka, into yokuba isiqalo sethebhu ebonisiweyo ngoku ayibonakali ngokukhawuleza (njengoko ingaphakathi kwimenyu eyehlayo evaliweyo) inokubangela ukubhideka. Ukusuka kumbono wofikelelo, okwangoku akukho ndlela isengqiqweni yokwenza imephu yolu hlobo lolwakhiwo kwipatheni eqhelekileyo ye-WAI ARIA, nto leyo ethetha ukuba ayinakwenziwa lula ukuba iqondeke kubasebenzisi bobuchwephesha bokuncedisa.

Ukusebenzisa iimpawu zedatha

Unokwenza ithebhu okanye ujongo lwepilisi ngaphandle kokubhala nayiphi na iJavaScript ngokuchaza ngokulula data-bs-toggle="tab"okanye data-bs-toggle="pill"kwinto. Sebenzisa ezi mpawu zedatha kwi .nav-tabsokanye .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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

NgeJavaScript

Yenza iithebhu ezinokubakho ngeJavaScript (ithebhu nganye kufuneka ivulwe ngokwayo):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Unokwenza ithebhu nganye isebenze ngeendlela ezininzi:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Fade isiphumo

Ukwenza iithebhu ziphelelwe, yongeza .fadekuyo nganye .tab-pane. Ipheyini yethebhu yokuqala kufuneka kwakhona .showyenze umxholo wokuqala ubonakale.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Iindlela

Iindlela ze-Asynchronous kunye notshintsho

Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba utshintsho luqalisiwe kodwa ngaphambi kokuba luphele . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .

Jonga uxwebhu lwethu lweJavaScript ngolwazi olungakumbi .

Yenza umxholo wakho njengento yethebhu.

Unokwenza umzekelo wethebhu kunye nomakhi, umzekelo:

const bsTab = new bootstrap.Tab('#myTab')

Indlela	Inkcazo
`dispose`	Uyonakalisa ithebhu yesiqalelo.
`getInstance`	Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wesithuba esidityaniswe nesiqalelo seDOM, ungayisebenzisa ngolu hlobo: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Indlela engatshintshiyo ebuyisela umzekelo wethebhu edityaniswe kwinto yeDOM okanye wenze entsha ukuba ayiqalwanga. Ungayisebenzisa ngolu hlobo `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Ikhetha isithuba esinikiweyo kwaye ibonise isahlulo sayo esinxulumeneyo. Nayiphi enye isithuba ebesikhe yakhethwa ngaphambili ayikhethwanga kwaye isahlulo sayo esinxulumeneyo siyafihlwa. Ibuyisela kumnxebi phambi kokuba ipayini yethebhu iboniswe ngokwenene (okt phambi kokuba `shown.bs.tab`isiganeko senzeke).

Iziganeko

Xa ubonisa ithebhu entsha, iziganeko zivutha ngolu hlobo lulandelayo:

hide.bs.tab(kwithebhu esebenzayo yangoku)
show.bs.tab(kwi-eza kuboniswa thebhu)
hidden.bs.tab(kwithebhu esebenzayo yangaphambili, efanayo nale hide.bs.tabyesiganeko)
shown.bs.tab(kwisithuba esandula ukusebenza esivele sibonise ithebhu, efanayo show.bs.tabnesesiganeko)

Ukuba akukho thebhu ibisele iyasebenza, ngoko i hide.bs.tabkunye hidden.bs.tabneziganeko aziyi kugxothwa.

Uhlobo lomsitho	Inkcazo
`hide.bs.tab`	Esi siganeko sitshisa xa isithuba esitsha siza kuboniswa (kwaye ke isithuba sangaphambili esisebenzayo siza kufihlwa). Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa ithebhu esebenzayo yangoku kunye nethebhu entsha eza kusebenza ngokukhawuleza, ngokulandelelanayo.
`hidden.bs.tab`	Esi siganeko sivutha emva kokuba ithebhu entsha ibonisiwe (kwaye ke isithuba sangaphambili esisebenzayo sifihliwe). Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa kwithebhu esebenzayo yangaphambili kunye nethebhu entsha esebenzayo, ngokulandelelanayo.
`show.bs.tab`	Esi siganeko sivutha kumboniso wethebhu, kodwa ngaphambi kokuba ithebhu entsha iboniswe. Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa isithuba esisebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo.
`shown.bs.tab`	Esi siganeko sitshisa kwi-tab show emva kokuba ithebhu ibonisiwe. Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa isithuba esisebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo.

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})