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

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

Бұл бетте

Base nav

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

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

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

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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

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

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

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

Ортасында .justify-content-center:

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Оң жаққа тураланған .justify-content-end:

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Вертикалды

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Қойындылар

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Таблеткалар

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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

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

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

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

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

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Сасс

Айнымалылар

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $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 қойындысының плагинін пайдаланыңыз (оны жеке немесе жинақталған файл арқылы қосыңыз).

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

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

Бұл негізгі қойындының байланыстырылған мазмұнының кейбір толтырғыш мазмұны. Басқа қойындыны басу келесі қойындының көрінуін ауыстырады. JavaScript қойындысы мазмұнның көрінуін және стилін басқару үшін сыныптарды ауыстырады. Сіз оны қойындылармен, таблеткалармен және кез келген басқа .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 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.

<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="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

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

<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>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

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

<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>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Және тік таблеткалармен.

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-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">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

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

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">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

JavaScript арқылы

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

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

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

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Әдістері

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

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

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

constructor

Қойынды элементін және мазмұн контейнерін белсендіреді. Қойындыда data-bs-targetнемесе сілтеме пайдаланылса, hrefDOM ішіндегі контейнер түйініне бағытталған төлсипат болуы керек.

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

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

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

көрсету

Берілген қойындыны таңдап, оған қатысты аумақты көрсетеді. Бұрын таңдалған кез келген басқа қойынды таңдалмайды және оған қатысты аумақ жасырылады. Қойындылар тақтасы нақты көрсетілмей тұрып (яғни shown.bs.tabоқиға болғанға дейін) қоңырау шалушыға оралады.

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

кәдеге жарату

Элемент қойындысын жояды.

getInstance

DOM элементімен байланысты қойынды данасын алуға мүмкіндік беретін статикалық әдіс

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

DOM элементімен байланысты қойынды данасын алуға немесе инициализацияланбаған жағдайда жаңасын жасауға мүмкіндік беретін статикалық әдіс

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Оқиғалар

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

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

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

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

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