Навигациялар мен қойындылар

Bootstrap қосылған навигация құрамдастарын пайдалану жолына арналған құжаттама және мысалдар.

Бұл бетте

Негізгі навигация

.navBootstrap жүйесінде қол жетімді шарлау негізгі сыныптан белсенді және өшірілген күйлерге дейін жалпы белгілеулер мен мәнерлерді бөліседі . Әр стиль арасында ауысу үшін модификатор сыныптарын ауыстырыңыз.

Негізгі .navқұрамдас flexbox көмегімен құрастырылған және навигациялық құрамдастардың барлық түрлерін құру үшін берік негіз береді. Ол кейбір мәнерді қайта анықтауды (тізімдермен жұмыс істеу үшін), үлкенірек әсер ету аймақтары үшін кейбір сілтеме толтыруды және негізгі өшірілген сәндеуді қамтиды.

Негізгі құрамдас ешбір күйді .navқамтымайды . .activeКелесі мысалдар классты қамтиды, негізінен осы нақты класс ешқандай арнайы сәндеуді тудырмайтынын көрсету үшін.

Белсенді күйді көмекші технологияларға жеткізу үшін aria-currentтөлсипатты пайдаланыңыз — pageағымдағы беттің мәнін немесе trueжиындағы ағымдағы элемент үшін.

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>

Сабақтар толығымен пайдаланылады, сондықтан сіздің белгілеуіңіз өте икемді болуы мүмкін. <ul>Элементтердің реті маңызды болса, жоғарыдағыдай s пайдаланыңыз немесе элементпен <ol>өзіңізді айналдырыңыз . <nav>Қолданатындықтан , .navшарлау display: flexсілтемелері шарлау элементтері сияқты әрекет етеді, бірақ қосымша белгілеусіз.

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>

Қолжетімді стильдер

.navМодификаторлар мен утилиталардың көмегімен s компонентінің стилін өзгертіңіз . Қажет болса, араластырыңыз және сәйкестендіріңіз немесе өзіңіз жасаңыз.

Көлденең туралау

Flexbox утилиталары арқылы навигатордың көлденең туралануын өзгертіңіз . Әдепкі бойынша, навигациялар солға тураланған, бірақ оларды ортаға немесе оңға туралауға оңай өзгертуге болады.

Ортасында .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>

Оң жаққа тураланған .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>

Вертикалды

Утилитамен икемді элемент бағытын өзгерту арқылы шарлауды жинақтаңыз .flex-column. Оларды кейбір көру порттарында жинақтау керек, бірақ басқаларында емес? Жауапты нұсқаларды пайдаланыңыз (мысалы, .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>

Әдеттегідей, тік навигация sсыз да мүмкін <ul>.

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>

Қойындылар

Негізгі шарлауды жоғарыдан алады және .nav-tabsқойынды интерфейсін жасау үшін сыныпты қосады. Оларды қойынды JavaScript плагинімен қойынды аймақтарын жасау үшін пайдаланыңыз .

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>

Таблеткалар

Дәл сол HTML алыңыз, бірақ .nav-pillsоның орнына пайдаланыңыз:

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>

Толтырыңыз және негіздеңіз

Мазмұныңызды .navекі модификатор класының бірін толық қол жетімді енін кеңейтуге мәжбүрлеңіз. Барлық бос орынды .nav-items арқылы пропорционалды түрде толтыру үшін пайдаланыңыз .nav-fill. Барлық көлденең кеңістікті алып жатқанына назар аударыңыз, бірақ әрбір навигация элементінің ені бірдей емес.

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>

<nav>Негізделген шарлауды пайдаланған кезде , стильдеу элементтері үшін .nav-itemғана .nav-linkқажет болғандықтан қауіпсіз өткізіп жіберуге болады.<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>

Ені бірдей элементтер үшін пайдаланыңыз .nav-justified. Барлық көлденең кеңістікті шарлау сілтемелері алады, бірақ .nav-fillжоғарыдағыдан айырмашылығы, әрбір навигация элементінің ені бірдей болады.

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>

Негізгі шарлауды .nav-fillпайдаланатын мысалға ұқсас .<nav>

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>

Flex утилиталарымен жұмыс істеу

Егер сізге жауап беретін шарлау нұсқалары қажет болса, flexbox утилиталарының қатарын пайдалануды қарастырыңыз . Неғұрлым егжей-тегжейлі болғанымен, бұл утилиталар жауап беретін тоқтау нүктелері бойынша көбірек теңшеуді ұсынады. Төмендегі мысалда біздің шарлау құрылғысы ең төменгі тоқтау нүктесінде жинақталады, содан кейін шағын тоқтау нүктесінен бастап қолжетімді енді толтыратын көлденең орналасуға бейімделеді.

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>

Қол жетімділікке қатысты

Навигация жолағын қамтамасыз ету үшін navs қолданып жатсаңыз role="navigation", ең логикалық негізгі контейнерге a қосуды ұмытпаңыз <ul>немесе <nav>элементті бүкіл шарлаудың айналасына ораңыз. Рөлді өзіне қоспаңыз <ul>, себебі бұл көмекші технологиялар арқылы оның нақты тізім ретінде жариялануына жол бермейді.

Класспен қойындылар ретінде көрнекі стильде болса да , шарлау жолақтары немесе атрибуттар берілмеуі.nav-tabs керек екенін ескеріңіз . Бұл ARIA Авторлық тәжірибелер нұсқаулығы қойындылар үлгісінде сипатталғандай, динамикалық қойынды интерфейстері үшін ғана жарамды . Мысал үшін осы бөлімдегі динамикалық қойынды интерфейстері үшін JavaScript әрекетін қараңыз . Бұл төлсипат динамикалық қойынды интерфейстерінде қажет емес, өйткені біздің JavaScript белсенді қойындыға қосу арқылы таңдалған күйді өңдейді.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

Ашылмалы тізімдерді пайдалану

Кішкене қосымша HTML және ашылмалы JavaScript плагині бар ашылмалы мәзірлерді қосыңыз .

Ашылмалы тізімдері бар қойындылар

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>

Ашылмалы тізімі бар таблеткалар

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

Айнымалылар

v5.2.0 нұсқасына қосылды

Bootstrap-тың дамып келе жатқан CSS айнымалылары тәсілінің бөлігі ретінде, navs енді .nav, .nav-tabs, және .nav-pillsнақты уақытта жақсартылған теңшеу үшін жергілікті CSS айнымалыларын пайдаланады. CSS айнымалыларының мәндері Sass арқылы орнатылады, сондықтан Sass теңшеуіне әлі де қолдау көрсетіледі.

Негізгі сыныпта .nav:

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

.nav-tabsМодификатор класында :

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

.nav-pillsМодификатор класында :

  --#{$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 айнымалылары

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

JavaScript әрекеті

bootstrap.jsЖергілікті мазмұнның қойынды тақталарын жасау үшін шарлау қойындылары мен таблеткаларымызды кеңейту үшін JavaScript қойындысының плагинін пайдаланыңыз (оны жеке немесе жинақталған файл арқылы қосыңыз).

Бұл негізгі қойындысының байланыстырылған мазмұнының кейбір толтырғыш мазмұны. Басқа қойындыны басу келесі қойындының көрінуін ауыстырады. JavaScript қойындысы мазмұнның көрінуін және стилін басқару үшін сыныптарды ауыстырады. Сіз оны қойындылармен, таблеткалармен және кез келген басқа .navқуатпен жұмыс істейтін навигациямен пайдалана аласыз.

Бұл Профиль қойындысының байланыстырылған мазмұнының кейбір толтырғыш мазмұны. Басқа қойындыны басу келесі қойындының көрінуін ауыстырады. JavaScript қойындысы мазмұнның көрінуін және стилін басқару үшін сыныптарды ауыстырады. Сіз оны қойындылармен, таблеткалармен және кез келген басқа .navқуатпен жұмыс істейтін навигациямен пайдалана аласыз.

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>

Сіздің қажеттіліктеріңізге сәйкес келу үшін бұл <ul>жоғарыда көрсетілгендей -негізделген белгілеумен немесе кез келген ерікті "өзіңізді айналдыру" белгілеуімен жұмыс істейді. пайдаланып жатсаңыз <nav>, оған тікелей қоспау керек екенін ескеріңіз role="tablist", себебі бұл элементтің навигациялық бағдар ретіндегі негізгі рөлін қайта анықтайды. Оның орнына балама элементке ауысыңыз (төмендегі мысалда қарапайым <div>) және оның <nav>айналасын ораңыз.

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>

Tabs плагині таблеткалармен де жұмыс істейді.

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>

Және тік таблеткалармен. Ең дұрысы, тік қойындылар үшін қойындылар aria-orientation="vertical"тізімі контейнеріне де қосу керек.

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>

Қол жетімділік

ARIA Authoring Practices Guide қойындылар үлгісінде сипатталған динамикалық қойынды интерфейстері олардың құрылымын, функционалдығын және ағымдағы күйін көмекші технологияларды пайдаланушыларға (мысалы, экраннан оқу құралдары) жеткізу үшін role="tablist", role="tab", role="tabpanel", және қосымша атрибуттарды талап етеді . aria-Ең жақсы тәжірибе ретінде біз <button>қойындылар үшін элементтерді пайдалануды ұсынамыз, себебі бұл жаңа бетке немесе орынға шарлайтын сілтемелер емес, динамикалық өзгертуді тудыратын басқару элементтері.

ARIA Authoring Practices үлгісіне сәйкес ағымдағы белсенді қойынды ғана пернетақта фокусын алады. JavaScript плагині инициализацияланған кезде, ол tabindex="-1"барлық белсенді емес қойынды басқару элементтеріне орнатылады. Ағымдағы белсенді қойындыда фокус болғаннан кейін, курсор пернелері алдыңғы/келесі қойындыны белсендіреді, плагин сәйкесінше жылжытуды өзгертеді. tabindexДегенмен, JavaScript плагині курсор пернелерінің өзара әрекеттесуіне қатысты көлденең және тік қойындылар тізімдерін ажыратпайтынын ескеріңіз: қойындылар тізімінің бағытына қарамастан, жоғары және сол жақ курсор алдыңғы қойындыға өтеді, ал төмен және оң жақ курсор келесіге өтеді. келесі қойынды.

Жалпы, пернетақта шарлауын жеңілдету үшін қойынды тақтасының ішіндегі мазмұнды мазмұнды қамтитын бірінші элемент әлдеқашан фокусталмайынша, қойынды тақталарының өзін де фокусталатын етіп жасау ұсынылады. tabindex="0"JavaScript плагині бұл аспектіні өңдеуге тырыспайды — қажет болған жағдайда, түзетулеріңізге қосу арқылы қойындылар тақталарын нақты фокусталатын ету керек .

JavaScript қойындысының плагині ашылмалы мәзірлерді қамтитын қойынды интерфейстерін қолдамайды , себебі олар ыңғайлылық пен қол жетімділік мәселелерін тудырады. Ыңғайлылық тұрғысынан қазіргі уақытта көрсетілген қойындының іске қосу элементінің бірден көрінбеуі (ол жабық ашылмалы мәзірдің ішінде болғандықтан) шатасуды тудыруы мүмкін. Қолжетімділік тұрғысынан, қазіргі уақытта мұндай құрылымды стандартты WAI ARIA үлгісімен салыстырудың ақылға қонымды жолы жоқ, яғни оны көмекші технологияларды пайдаланушыларға оңай түсінуге болмайды.

Деректер атрибуттарын пайдалану

data-bs-toggle="tab"Сіз жай ғана көрсету немесе элементте JavaScript жазбай-ақ қойындыны немесе таблетка шарлауын белсендіре аласыз data-bs-toggle="pill". Бұл деректер атрибуттарын .nav-tabsнемесе параметрінде пайдаланыңыз .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>

JavaScript арқылы

JavaScript арқылы қойынды қойындыларын қосыңыз (әр қойындыны жеке белсендіру қажет):

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

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

Жеке қойындыларды бірнеше жолмен белсендіруге болады:

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үшін әрқайсысына қосыңыз .tab-pane. Бірінші қойынды тақтасында .showбастапқы мазмұнды көрінетін ету керек.

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

Әдістері

Асинхронды әдістер мен ауысулар

Барлық API әдістері асинхронды және өтуді бастайды . Олар қоңырау шалушыға ауысу басталған бойда, бірақ аяқталмай тұрып қайтады . Сонымен қатар, өтпелі құрамдастағы әдіс шақыруы еленбейді .

Қосымша ақпарат алу үшін біздің JavaScript құжаттамасын қараңыз .

Мазмұнды қойынды элементі ретінде белсендіреді.

Конструктормен қойынды данасын жасауға болады, мысалы:

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

Әдіс	Сипаттама
`dispose`	Элемент қойындысын жояды.
`getInstance`	DOM элементімен байланысты қойынды данасын алуға мүмкіндік беретін статикалық әдіс, оны келесідей пайдалануға болады: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	DOM элементімен байланысты қойынды данасын қайтаратын немесе инициализацияланбаған жағдайда жаңасын жасайтын статикалық әдіс. Сіз оны келесідей пайдалана аласыз: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Берілген қойындыны таңдап, оған қатысты аумақты көрсетеді. Бұрын таңдалған кез келген басқа қойынды таңдалмайды және оған қатысты аумақ жасырылады. Қойындылар тақтасы нақты көрсетілмей тұрып (яғни `shown.bs.tab`оқиға болғанға дейін) қоңырау шалушыға оралады.

Оқиғалар

Жаңа қойындыны көрсеткенде оқиғалар келесі ретпен іске қосылады:

hide.bs.tab(ағымдағы белсенді қойындыда)
show.bs.tab(көрсетілетін қойындыда)
hidden.bs.tab(алдыңғы белсенді қойындыда hide.bs.tabоқиғамен бірдей)
shown.bs.tab(жаңа ғана белсенді қойындыда, show.bs.tabоқиға үшін бірдей)

Ешбір қойынды бұрыннан белсенді болмаса, hide.bs.tabжәне hidden.bs.tabоқиғалары өшірілмейді.

Оқиға түрі	Сипаттама
`hide.bs.tab`	Бұл оқиға жаңа қойынды көрсетілетін кезде іске қосылады (және осылайша алдыңғы белсенді қойынды жасырылады). Сәйкесінше ағымдағы белсенді қойындыны және жақында белсенді болатын жаңа қойындыны мақсатты ету үшін `event.target`және пайдаланыңыз .`event.relatedTarget`
`hidden.bs.tab`	Бұл оқиға жаңа қойынды көрсетілгеннен кейін іске қосылады (және осылайша алдыңғы белсенді қойынды жасырылады). Алдыңғы белсенді қойындыға және жаңа белсенді қойындыға тиісінше мақсат қою үшін `event.target`және түймелерін пайдаланыңыз .`event.relatedTarget`
`show.bs.tab`	Бұл оқиға қойындылар көрсетілімінде іске қосылады, бірақ жаңа қойынды көрсетілмей тұрып. Белсенді қойындыны және алдыңғы белсенді қойындыны (бар болса) тиісінше бағыттау үшін `event.target`және пайдаланыңыз .`event.relatedTarget`
`shown.bs.tab`	Бұл оқиға қойынды көрсетілгеннен кейін қойындылар көрсетілімінде іске қосылады. Белсенді қойындыны және алдыңғы белсенді қойындыны (бар болса) тиісінше бағыттау үшін `event.target`және пайдаланыңыз .`event.relatedTarget`

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