Navs sy tabs

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

Amin'ity pejy ity

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.

Mba hampita ny toetra mavitrika amin'ny teknolojia manampy, ampiasao ny aria-currenttoetra — mampiasa ny pagesanda ho an'ny pejy ankehitriny, na trueho an'ny singa ankehitriny ao anaty andiana.

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>

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.

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>

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:

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>

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

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

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>

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

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>

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 .

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>

levitra

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

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>

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.

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>

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

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>

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.

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>

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

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>

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.

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>

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. Ny aria-currenttoetra dia tsy ilaina amin'ny dynamic tabbed interfaces satria ny JavaScript-ntsika no mitantana ny fanjakana voafantina amin'ny fanampiana aria-selected="true"amin'ny tabilao mavitrika.

Mampiasa dropdowns

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

Kiheba misy fidinana

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>

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

hiovaova

Nampiana v5.2.0

Ao anatin'ny fomba fiovaovan'ny CSS mivoatra an'ny Bootstrap, ny navs izao dia mampiasa ny fari-piadidiana CSS eo an-toerana amin'ny .nav, .nav-tabs, ary .nav-pillsho an'ny fanamboarana amin'ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana Sass.

Ao amin'ny .navkilasy fototra:

  --#{$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};

Ao amin'ny .nav-tabskilasy modifier:

  --#{$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};

Ao amin'ny .nav-pillskilasy modifier:

  --#{$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};

Sass variables

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

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.

Ity dia atiny mpihazona toerana sasany amin'ny atiny mifandray amin'ny tabilao Home . Ny fipihana kiheba hafa dia hanova ny fahitana an'ity iray ity ho an'ny manaraka. Ny tabilao JavaScript dia mifamadika kilasy mba hifehezana ny fahitana ny atiny sy ny fomba. Azonao atao ny mampiasa azy io miaraka amin'ny tabilao, pilina, ary .navnavigation hafa.

Ity dia atiny mpihazona toerana sasany amin'ny atiny mifandraika amin'ny tabilao Profile . Ny fipihana kiheba hafa dia hanova ny fahitana an'ity iray ity ho an'ny manaraka. Ny tabilao JavaScript dia mifamadika kilasy mba hifehezana ny fahitana ny atiny sy ny fomba. Azonao atao ny mampiasa azy io miaraka amin'ny tabilao, pilina, ary .navnavigation hafa.

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>

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.

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>

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

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>

Ary miaraka amin'ny pilina mitsangana. Ny tsara indrindra, ho an'ny tabilao mitsangana dia tokony ampidirinao aria-orientation="vertical"ao amin'ny fitoeran'ny lisitry ny tabilao ihany koa.

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>

Accessibility

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 hampita ny rafitra, ny fiasany ary ny toe-javatra misy azy ireo amin'ny 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.

Mifanaraka amin'ny fomba fanao amin'ny fanoratana ARIA, ny tabilao mavitrika amin'izao fotoana izao ihany no mahazo fifantohana amin'ny fitendry. Rehefa natomboka ny plugin JavaScript, dia hapetraka tabindex="-1"amin'ny fanaraha-maso kiheba tsy mavitrika rehetra izany. Raha vao mifantoka ny tabilao mavitrika amin'izao fotoana izao, ny fanalahidin'ny cursor dia manetsika ny tabilao teo aloha/manaraka, miaraka amin'ny plugin manova ny rovingtabindex mifanaraka amin'izany. Na izany aza, mariho fa ny plugin JavaScript dia tsy manavaka ny lisitry ny tabilao mitsivalana sy mitsangana raha ny fifandraisan'ny cursor key: na inona na inona fironan'ny lisitry ny tabilao, ny cursor ambony sy havia dia mandeha amin'ny tabilao teo aloha, ary ny cursor midina sy havanana dia mandeha any ny tabilao manaraka.

Amin'ny ankapobeny, mba hanamorana ny fitetezana kitendry, dia asaina manao izay hifantoka ihany koa ny takelaka kiheba, raha tsy hoe efa azo ifantohan'ny singa voalohany misy votoaty manan-danja ao anatin'ny tontonana. Ny plugin JavaScript dia tsy manandrana mitantana an'io lafiny io - raha mety dia mila manao mazava tsara ny tontonana tabilao ianao amin'ny fampidirana tabindex="0"ao amin'ny marikao.

Ny plugin JavaScript tab dia tsy mahazaka fifandraisana 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.

Mampiasa ny angona toetra

Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra JavaScript amin'ny alalan'ny famaritana fotsiny data-bs-toggle="tab"na data-bs-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-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>

Amin'ny JavaScript

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

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

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

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

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

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 .

Manetsika ny atiny ho singa kiheba.

Azonao atao ny mamorona ohatra tabilao miaraka amin'ny mpanamboatra, ohatra:

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

FOMBA	Description
`dispose`	Manimba ny tabilao misy singa.
`getInstance`	Fomba static izay ahafahanao mahazo ny ohatra tabilao mifandray amin'ny singa DOM, azonao ampiasaina toy izao: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Fomba static izay mamerina ohatra tabilao mifandray amin'ny singa DOM na mamorona vaovao raha toa ka tsy natomboka izany. Azonao ampiasaina toy izao: `bootstrap.Tab.getOrCreateInstance(element)`.
`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.tab`nitrangan'ny hetsika).

zava-mitranga

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

hide.bs.tab(amin'ny tabilao mavitrika ankehitriny)
show.bs.tab(eo amin'ny tabilao haseho)
hidden.bs.tab(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'ny hide.bs.tabhetsika)
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
`hide.bs.tab`	Mirehitra ity hetsika ity rehefa misy kiheba vaovao haseho (ary noho izany dia afenina ny kiheba mavitrika teo aloha). Ampiasao `event.target`sy `event.relatedTarget`kendrena 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.target`sy `event.relatedTarget`ikendrena ny tabilao mavitrika teo aloha sy ny tabilao mavitrika vaovao.
`show.bs.tab`	Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao `event.target`sy `event.relatedTarget`kendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
`shown.bs.tab`	Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao `event.target`sy `event.relatedTarget`kendrena ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).

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