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

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

Бу биттә

Төп диңгез

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

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

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

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>

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

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

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

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

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

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

Таблицалар

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

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

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

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>

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

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

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

Variзгәрешләр

V5.2.0 өстәлде

Bootstrap үсешенең CSS үзгәрүчәнлеге алымы кысаларында, диңгезчеләр хәзерге вакытта CSS үзгәрүчәннәрен кулланалар .nav, .nav-tabsһәм .nav-pillsреаль вакытны көчәйтү өчен. 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};

Сасс үзгәрүләр

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

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

Бу өй салынмасының бәйләнешле эчтәлеге. Башка кыстыргычка чирттереп, аның киләсе өчен күренүен үзгәртәчәк. 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>

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

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 Авторлык Практикасы Белешмәлеге таблицасында күрсәтелгәнчә , структурасын, функциональлеген һәм хәзерге торышын ярдәмче технологияләр кулланучыларына җиткерү өчен, өстәмә атрибутлар таләп итә (экран укучылары role="tablist"кебек ) . Иң яхшы практика буларак, без таблицалар өчен элементлар кулланырга киңәш итәбез, чөнки бу яңа биткә яки урынга күчү сылтамалары түгел, ә динамик үзгәрешләр кертә торган контроль.role="tab"role="tabpanel"aria-<button>

ARIA авторлык практикасы үрнәгенә туры китереп, хәзерге вакытта актив булган клавиатура фокусын ала. JavaScript плагины башлангач, ул tabindex="-1"барлык актив булмаган таблицаларда урнаштырылачак. Хәзерге вакытта актив булган кыстыргыч фокуска ия булгач, курсор ачкычлары алдагы / киләсе кыстыргычны активлаштыра, плагин хәрәкәтнеtabindex үзгәртә . Ләкин, шуны истә тотыгыз: JavaScript плагины курсорның төп үзара бәйләнешенә килгәндә горизонталь һәм вертикаль таблицалар исемлеген аермый: таблицалар исемлегенең юнәлешенә карамастан, өске һәм сул курсор алдагы салынмага, аска һәм уң курсорга бара. киләсе кыстыргыч.

Гомумән алганда, клавиатура навигациясен җиңеләйтү өчен, кыстыргыч панельләрен дә игътибарлы итәргә киңәш ителә, әгәр таблицалар эчендә мәгънәле эчтәлек булган беренче элемент инде игътибарлы булмаса. JavaScript плагины бу аспект белән эшләргә тырышмый - кирәк булган очракта, сез үзегезнең өстәмә панельләрегезне ачык итеп күрсәтергә тиеш tabindex="0".

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