Хәрби диңгезләр

Bootstrap'ның кертелгән навигация компонентларын ничек куллану өчен документлар һәм мисаллар.

Бу биттә

Base nav

Bootstrap'та булган навигация гомуми билгеләрне һәм стильләрне бүлешә, төп .navкласстан актив һәм инвалид хәлләргә кадәр. Eachәр стиль арасында күчү өчен модификатор классларын алыштырыгыз.

Төп .navкомпонент флексбокс белән төзелгән һәм барлык төр навигация компонентларын төзү өчен ныклы нигез бирә. Бу үз эченә кайбер стиль өстәмәләрен кертә (исемлекләр белән эшләү өчен), зуррак ситуацияләр өчен кайбер сылтамалар, төп инвалид стилизация.

Төп компонент бернинди дәүләтне .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>Itemsгарыдагы кебек кулланыгыз <ol>, әйберләрегезнең тәртибе мөһим булса, яисә үзегезне <nav>элемент белән әйләндерегез. Чөнки .navкуллану display: flex, nav сылтамалары nav әйберләре кебек эш итәләр, ләкин өстәмә билгеләрсез.

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

Мөмкин стильләр

S компонентының стилен .navүзгәртүчеләр һәм инженерлар белән үзгәртегез. Кирәк булганда кушылыгыз, яисә үзегезнекен төзегез.

Горизонталь тигезләү

Флексбокс ярдәмендә сезнең диңгезнең горизонталь тигезләнешен үзгәртегез . Килешү буенча, диңгезләр сул якка тигезләнгән, ләкин сез аларны җиңел генә үзәккә яки уңга тигезләргә үзгәртә аласыз.

Белән үзәкләштерелгән .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. Аларны кайбер күренешләргә урнаштырырга кирәк, ә башкалар түгел? Respаваплы версияләрне кулланыгыз (мәсәлән, .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>

Alwaysәрвакыттагыча, вертикаль навигация ләрсез дә мөмкин <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>

Таблицалар

Aboveгарыдан төп диңгезне ала һәм .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-itemөчен кулланыгыз .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>

Флекс коммуналь хезмәтләр белән эшләү

Сезгә җаваплы диңгез вариацияләре кирәк булса, флексбокс программаларын кулланыгыз . Күбрәк сүзле булса да, бу коммуналь хезмәтләр җаваплы өзекләр аша зуррак үзенчәлекләр тәкъдим итә. Түбәндәге мисалда безнең диңгез иң түбән ноктада урнаштырылачак, аннары горизонталь макетка яраклашачак, кечкенә киңлектән башлап булган киңлекне тутыра.

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

Мөмкинлеккә килгәндә

Әгәр дә сез навигация сызыгын тәэмин итү өчен диңгез хәрәкәтләрен кулланасыз икән role="navigation", иң логик ата-аналар контейнерына өстәргә <ul>яки <nav>бөтен навигациягә элементны урарга онытмагыз. Рольне <ul>үзенә өстәмәгез, чөнки бу аның ярдәмче технологияләр ярдәмендә фактик исемлек булып игълан ителүенә комачаулый.

Игътибар итегез, навигация барлары, хәтта .nav-tabsкласс белән таблицалар рәвешендә ясалган булса да, бирелергә тиеш түгел ,role="tablist" яки role="tab"атрибутлар role="tabpanel". Болар WAI ARIA авторлык практикасында күрсәтелгәнчә, динамик өстәл интерфейслары өчен генә туры килә . Мисал өчен бу бүлектә динамик таблицалы интерфейслар өчен JavaScript тәртибен карагыз . Динамик таблицалы интерфейсларда атрибут кирәк түгел , чөнки безнең JavaScript актив кыстыргычка aria-currentөстәп сайланган халәтне эшкәртә .aria-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>

Сасс

Variзгәрешләр

$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 тәртибе

JavaScript плагинын кулланыгыз - аны индивидуаль яки тупланган bootstrap.jsфайл аша кертегез - безнең навигацион таблицаларны һәм таблеткаларны киңәйтү өчен, җирле эчтәлекнең таблицаларын булдыру өчен.

WAI ARIA авторлык практикасында сурәтләнгәнчә, динамик өстәл интерфейслары, структурасын, функциональлеген һәм хәзерге торышын ярдәмче технологияләр кулланучыларына җиткерү өчен, өстәмә атрибутлар таләп итә (экран укучылары 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>

Таблицалар плагины таблеткалар белән дә эшли.

<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

Таблица элементын һәм эчтәлек контейнерын активлаштыра. Таблицада DOM контейнер төймәсенә юнәлтелгән data-bs-target, яки сылтама, атрибут кулланылса , булырга тиеш.href

<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.tabhide.bs.tab(алдагы актив кыстыргычта, вакыйга белән бер үк )
shown.bs.tabshow.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
})