Navs болон таб

Bootstrap-д орсон навигацийн бүрэлдэхүүн хэсгүүдийг хэрхэн ашиглах тухай баримт бичиг, жишээнүүд.

Энэ хуудсан дээр

Үндсэн навигаци

.navBootstrap-д ашиглах боломжтой навигаци нь үндсэн ангиас идэвхтэй болон идэвхгүй төлөв хүртэлх ерөнхий тэмдэглэгээ, хэв маягийг хуваалцдаг . Загвар бүрийн хооронд шилжихийн тулд өөрчлөгч ангиудыг солино уу.

Үндсэн .navбүрэлдэхүүн хэсэг нь flexbox-оор бүтээгдсэн бөгөөд бүх төрлийн навигацийн бүрэлдэхүүн хэсгүүдийг бүтээхэд бат бөх суурийг бүрдүүлдэг. Энэ нь зарим хэв маягийг дарах (жагсаалттай ажиллахад), илүү том цохилтод зориулсан зарим холбоосын дүүргэлт, үндсэн идэвхгүй хэв маягийг агуулдаг.

Үндсэн .navбүрэлдэхүүн хэсэг нь ямар ч .activeтөлөвийг агуулдаггүй. Дараах жишээнүүд нь тухайн анги нь ямар нэгэн тусгай загвар үүсгэхгүй гэдгийг харуулахын тулд ангиллыг багтаасан болно.

Идэвхтэй төлөвийг туслах технологид дамжуулахын тулд одоогийн хуудасны утгыг эсвэл багц дахь одоогийн зүйлийн утгыг aria-currentашиглан шинж чанарыг ашиглана уу.pagetrue

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-г ашиглана уу эсвэл элементээр өөрөө өнхрүүлээрэй. Хэрэглээний хувьд navigation холбоосууд нь navigation-ийн элементүүдтэй адилхан ажилладаг боловч нэмэлт тэмдэглэгээгүйгээр ажилладаг.<ol><nav>.navdisplay: 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 хэрэгслүүдийн тусламжтайгаар Nav-ынхаа хэвтээ байрлалыг өөрчил . Анхдагчаар, navs нь зүүн тийш зэрэгцүүлсэн байдаг, гэхдээ та тэдгээрийг төв эсвэл баруун зэрэгцүүлсэн болгож хялбархан өөрчилж болно.

Төвлөрсөн .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>

Ердийнх шиг, босоо навигаци нь <ul>s-гүйгээр бас боломжтой.

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-г авч, .nav-tabsтаб-тай интерфэйс үүсгэхийн тулд анги нэмдэг. Тэдгээрийг ашиглан манай таб JavaScript залгаасыг ашиглан tabable бүсүүдийг үүсгэ .

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дээрхээс ялгаатай нь navigasyon элемент бүр ижил өргөнтэй байх болно.

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>

Флекс хэрэгслүүдтэй ажиллах

Хэрэв танд мэдрэгчтэй навигаци хэрэгтэй бол хэд хэдэн flexbox хэрэгслийг ашиглах талаар бодож үзээрэй . Илүү дэлгэрэнгүй боловч эдгээр хэрэгслүүд нь хариу үйлдэл үзүүлэх цэгүүдэд илүү их тохируулгыг санал болгодог. Доорх жишээнд манай 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>

Хүртээмжтэй байдлын тухайд

Хэрэв та навигацийн талбарыг хангахын тулд 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

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн аргын нэг хэсэг болгон navs нь одоо , дээр орон нутгийн 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};

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-ийн үйлдэл

Табын JavaScript залгаасыг ашиглан дангаар нь эсвэл эмхэтгэсэн bootstrap.jsфайлаар оруулаарай - манай навигацийн таб болон эмүүдийг өргөтгөж, локал контентын tabable самбарыг үүсгэх.

Энэ бол Нүүр хуудасны холбогдох контентын зарим орлуулагч контент юм. Өөр табыг дарснаар дараагийн цонхонд энэ табыг харагдуулна. 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 Authoring Practices загварын дагуу зөвхөн одоо идэвхтэй байгаа таб л гарын фокусыг хүлээн авдаг. JavaScript залгаасыг эхлүүлэх үед энэ нь tabindex="-1"бүх идэвхгүй табын удирдлагад тохируулагдана. Одоо идэвхтэй байгаа таб дээр анхаарлаа төвлөрүүлсний дараа курсорын товчлуурууд өмнөх/дараагийн табыг идэвхжүүлж, залгаас нь чиглүүлэгчийг зохих ёсоор өөрчилдөгtabindex . Гэсэн хэдий ч JavaScript залгаас нь курсорын товчлуурын харилцан үйлчлэлийн хувьд хэвтээ ба босоо табын жагсаалтыг ялгадаггүй болохыг анхаарна уу: табын жагсаалтын чиглэлээс үл хамааран дээш болон зүүн курсор хоёулаа өмнөх таб руу, доош ба баруун курсорууд руу очно. дараагийн таб.

Ерөнхийдөө, табын самбар доторх утга учиртай контент агуулсан эхний элемент аль хэдийн анхаарлаа төвлөрүүлэх боломжтой болоогүй л бол гарны навигацийг хөнгөвчлөхийн тулд табын самбаруудыг өөрөө фокуслах боломжтой болгохыг зөвлөж байна. tabindex="0"JavaScript залгаас нь энэ тал дээр ажиллахыг оролддоггүй - шаардлагатай бол та тэмдэглэгээнд нэмж, табын самбаруудыг тодорхой чиглүүлэх шаардлагатай болно .

Таб JavaScript залгаас нь унадаг цэсийг агуулсан чихтэй интерфэйсийг дэмждэггүй , учир нь эдгээр нь ашиглалт болон хүртээмжтэй холбоотой асуудал үүсгэдэг. Хэрэглэх боломжийн үүднээс авч үзвэл, одоо гарч байгаа табын гох элемент нь шууд харагдахгүй байгаа нь (хаалттай унадаг цэс дотор байгаа тул) төөрөгдөл үүсгэж болзошгүй юм. Хүртээмжтэй байдлын үүднээс авч үзвэл, энэ төрлийн бүтцийг стандарт WAI ARIA загварт буулгах оновчтой арга одоогоор байхгүй байгаа бөгөөд энэ нь туслах технологийн хэрэглэгчдэд амархан ойлгомжтой байх боломжгүй гэсэн үг юм.

Өгөгдлийн шинж чанаруудыг ашиглах

Та ямар нэгэн JavaScript бичихгүйгээр зүгээр л нэг элемент дээр зааж өгснөөр таб data-bs-toggle="tab"эсвэл эм навигацийг идэвхжүүлж болно. 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-ээр чихтэй табуудыг идэвхжүүлэх (tab бүрийг тус тусад нь идэвхжүүлэх шаардлагатай):

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 баримтаас үзнэ үү .

Таны контентыг tab элемент болгон идэвхжүүлнэ.

Та бүтээгчтэй табын жишээ үүсгэж болно, жишээлбэл:

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`	Энэ үйл явдал нь шинэ таб харагдахаас өмнө tab шоу дээр гарч ирдэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`
`shown.bs.tab`	Энэ үйл явдал нь табыг харуулсны дараа 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
})