Sanaw topary

Sanaw toparlary bir topar mazmuny görkezmek üçin çeýe we güýçli komponentdir. Içindäki islendik mazmuny goldamak üçin olary üýtgediň we giňeldiň.

Bu sahypada

Esasy mysal

Iň esasy sanaw topary, sanaw elementleri we degişli synplar bilen tertipsiz sanaw. Ondan soňky saýlawlar ýa-da zerur bolanda öz CSS-leriňiz bilen guruň.

Bir element
Ikinji element
Üçünji element
Dördünji element
Bäşinji

html

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Işjeň zatlar

Häzirki işjeň saýlamany görkezmek .activeüçin a goşuň ..list-group-item

Işjeň element
Ikinji element
Üçünji element
Dördünji element
Bäşinji

html

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Öçürilen zatlar

Öçürilen ýaly görünmek üçin .disableda goşuň . Käbir elementleriň basmak hadysalaryny (meselem, baglanyşyklar) doly öçürmek üçin ýörite JavaScript talap ediljekdigine üns beriň ..list-group-item.disabled

Öçürilen element
Ikinji element
Üçünji element
Dördünji element
Bäşinji

html

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Salgylar we düwmeler

Goşmak arkaly hereketli, ýapyk we işjeň ýagdaýlar bilen hereket edip boljak sanaw toparlaryny döretmek üçin <a>s ýa-da s ulanyň . Interaktiw däl elementlerden düzülen sanaw toparlarynyň ( ýa-da lar) basmak ýa-da basmak mümkinçiligini üpjün etmezligi üçin bu galp synplary bölýäris.<button>.list-group-item-action<li><div>

Bu ýerde adaty sapaklary ulanmaň.btn .

Häzirki baglanyşyk elementi Ikinji baglanyşyk elementi Üçünji baglanyşyk elementi Dördünji baglanyşyk elementi Öçürilen baglanyşyk elementi

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

<button>S bilen , synpyň disabledýerine atributdan peýdalanyp bilersiňiz. .disabledGynansagam, <a>s ýapyk atributy goldamaýar.

html

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Flush

.list-group-flushEne konteýnerde (meselem, kartoçkalarda) sanaw toparlarynyň elementlerini gyrada görkezmek üçin käbir serhetleri we tegelek burçlary aýyrmak üçin goşuň .

Bir element
Ikinji element
Üçünji element
Dördünji element
Bäşinji

html

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Sanly

Sanly sanaw topar elementlerini saýlamak .list-group-numberedüçin üýtgediji synpy goşuň (we islege görä bir elementi ulanyň). <ol>Sanlar <ol>sanaw topar elementleriniň içinde has gowy ýerleşdirmek we has gowy özleşdirmek üçin CSS arkaly (adaty brauzer stilinden tapawutlylykda) döredilýär.

Sanlar tarapyndan döredilýär , soňra stilleşdirilýär we üstünde we counter-resetýasama element bilen ýerleşdirilýär .<ol>::before<li>counter-incrementcontent

Sanaw elementi
Sanaw elementi
Sanaw elementi

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

Bular adaty mazmun bilen ajaýyp işleýär.

Aşakdaky sözbaşy
Sanaw elementiniň mazmuny
14
Aşakdaky sözbaşy
Sanaw elementiniň mazmuny
14
Aşakdaky sözbaşy
Sanaw elementiniň mazmuny
14

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Gorizontal

.list-group-horizontalSanaw toparlarynyň elementleriniň ýerleşişini ähli kesiş nokatlarynda dikligine keseligine üýtgetmek üçin goşuň . Ativea-da bolmasa, .list-group-horizontal-{sm|md|lg|xl|xxl}şol nokatdan başlap sanaw toparyny keseligine düzmek üçin täsirli warianty saýlaň min-width. Häzirki wagtda keseligine sanaw toparlaryny sanaw sanawy toparlary bilen birleşdirip bolmaz.

ProTip: Gorizontal bolanda deň giňlikdäki sanaw topar elementlerini isleýärsiňizmi? .flex-fillHer sanaw toparyna element goşuň .

Bir element
Ikinji element
Üçünji element

Bir element
Ikinji element
Üçünji element

Bir element
Ikinji element
Üçünji element

Bir element
Ikinji element
Üçünji element

Bir element
Ikinji element
Üçünji element

Bir element
Ikinji element
Üçünji element

html

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Kontekst sapaklary

Düzgünli we reňkli elementleriň sanawyny düzmek üçin kontekst sapaklaryny ulanyň.

Simpleönekeý deslapky sanaw topary elementi
Simpleönekeý başlangyç sanaw topary elementi
Simpleönekeý ikinji derejeli topar elementi
Successönekeý üstünlik sanawy topar elementi
Dangerönekeý howp sanawy topary elementi
Simpleönekeý duýduryş sanawy topary elementi
Simpleönekeý maglumat sanawy topar elementi
Lightönekeý yşyk sanawy topary elementi
Simpleönekeý garaňky sanaw topary elementi

html

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Kontekst sapaklary hem işleýär .list-group-item-action. Öňki mysalda ýok bu ýerdäki aýlaw stilleriniň goşulmagyna üns beriň. Şeýle hem .activedöwlet goldaw berýär; kontekstdäki sanaw topary elementinde işjeň saýlamany görkezmek üçin ulanyň.

Simpleönekeý deslapky sanaw topary elementi Simpleönekeý başlangyç sanaw topary elementi Simpleönekeý ikinji derejeli topar elementi Successönekeý üstünlik sanawy topar elementi Dangerönekeý howp sanawy topary elementi Simpleönekeý duýduryş sanawy topary elementi Simpleönekeý maglumat sanawy topar elementi Lightönekeý yşyk sanawy topary elementi Simpleönekeý garaňky sanaw topary elementi

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .visually-hiddensynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Nyşanlar bilen

Käbir kömekçi enjamlaryň kömegi bilen okalmadyk sanlary, işjeňligi we başga zatlary görkezmek üçin islendik sanaw toparyna element goşuň .

Sanaw elementi14
Ikinji sanaw elementi2
Üçünji sanaw elementi1

html

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

Omörite mazmun

Flexbox kömekçi enjamlarynyň kömegi bilen, hatda aşakdaky ýaly baglanyşdyrylan sanaw toparlary üçin hem islendik HTML diýen ýaly goşuň .

Topar elementiniň sözbaşysyny sanaň

3 gün öň

Abzasdaky käbir ýer eýesi mazmuny.

Käbir ownuk çap.

Topar elementiniň sözbaşysyny sanaň

3 gün öň

Abzasdaky käbir ýer eýesi mazmuny.

Käbirleri bolsa kiçijik çap edildi.

Topar elementiniň sözbaşysyny sanaň

3 gün öň

Abzasdaky käbir ýer eýesi mazmuny.

Käbirleri bolsa kiçijik çap edildi.

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

Bellikler we radiolar

“Bootstrap” -yň belliklerini we radiolaryny sanaw toparlarynyň elementlerine ýerleşdiriň we zerur bolanda düzüň. Olary s bolmasa ulanyp bilersiňiz , ýöne elýeterlilik üçin bir atribut we baha <label>goşmagy ýatdan çykarmaň .aria-label

Ilki bellik
Ikinji bellik
Üçünji bellik

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

Ilkinji radio
Ikinji radio
Üçünji radio

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Sanawdaky toparyň elementini tutuşlygyna basmak üçin s-de ulanyp bilersiňiz .stretched-link.<label>

Ilki bellik
Ikinji bellik
Üçünji bellik

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjileriniň çemeleşmesiniň bir bölegi hökmünde sanaw toparlary .list-grouphakyky wagtlaýyn özleşdirmek üçin ýerli CSS üýtgeýjileri ulanýarlar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass üýtgeýjileri

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Mixins

S üçin kontekstdäki wariant synplaryny$theme-colors döretmek üçin bilelikde ulanylýar ..list-group-item

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Aýlaw

Mixin bilen üýtgediji synplary döredýän list-group-item-variant()aýlaw.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

JavaScript häsiýeti

bootstrap.jsJavaerli mazmunyň tablisa panellerini döretmek üçin sanaw toparymyzy giňeltmek üçin JavaScript pluginini ulanyň - ony aýratyn ýa-da düzülen faýlyň üsti bilen goşuň.

Öý Profil Habarlar Sazlamalar

"Öý" bilen baglanyşykly abzasdaky käbir ýer eýesi mazmuny. Bu ýerde bu tab panelini doldurmak we doldurmak üçin ulanylýan başga-da birnäçe mazmun. Önümçilikde, bu ýerde has hakyky mazmuna eýe boljakdygyňyz belli. Diňe tekst däl. Hakykatdanam islendik zat bolup biler. Tekst, suratlar, görnüşler.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Maglumat atributlaryny ulanmak

Diňe bir elementi ýa-da bir elementi görkezip, hiç hili JavaScript ýazmazdan sanaw topary nawigasiýasyny işjeňleşdirip bilersiňiz data-bs-toggle="list". Bu maglumat atributlaryny ulanyň .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

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

JavaScript arkaly

JavaScript arkaly tablisa sanawy elementini açyň (her sanaw elementi aýratyn işjeňleşdirilmeli):

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

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

Aýry-aýry sanaw elementlerini birnäçe usul bilen işjeňleşdirip bilersiňiz:

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

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Öçürilen effekt

Salgylar paneliniň ýitmegi .fadeüçin hersine goşuň .tab-pane. Ilkinji goýma paneli .showbaşlangyç mazmuny görünmeli.

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

Usullar

Asynkron usullar we geçişler

APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .

Mazmunyňyzy goýma elementi hökmünde işjeňleşdirýär.

Konstruktor bilen bir tab mysal döredip bilersiňiz, mysal üçin:

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

Usul	Düşündiriş
`dispose`	Bir elementiň goýmasyny ýok edýär.
`getInstance`	DOM elementi bilen baglanyşykly tab mysalyny almaga mümkinçilik berýän statiki usul, ony şeýle ulanyp bilersiňiz : `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	DOM elementi bilen baglanyşykly tablisa mysalyny yzyna gaýtaryp berýän ýa-da başlamadyk ýagdaýynda täzesini döredýän statiki usul. Muny şeýle ulanyp bilersiňiz : `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Berlen goýmany saýlaýar we baglanyşykly paneli görkezýär. Öň saýlanan başga bir tab saýlanmaýar we oňa bagly panel gizlenýär. Salgy paneli hakykatdanam görkezilmänkä (ýagny `shown.bs.tab`waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.

Wakalar

Täze tab görkezilende wakalar aşakdaky tertipde ýanýar:

hide.bs.tab(häzirki işjeň goýmada)
show.bs.tab(görkezilmeli goýmada)
hidden.bs.tabhide.bs.tab(öňki işjeň goýmada, waka bilen birmeňzeş )
shown.bs.tabshow.bs.tab(täze işjeň görkezilen ýaňy görkezilen goýmada, waka bilen birmeňzeş )

Hiç bir goýma eýýäm işjeň bolmadyk bolsa, wakalar hide.bs.tabwe hidden.bs.tabwakalar atylmaz.

Çäräniň görnüşi	Düşündiriş
`hide.bs.tab`	Bu waka täze goýma görkezilmeli bolanda ýanýar (we şeýlelik bilen öňki işjeň goýma gizlenmeli). Häzirki işjeň goýmany we ýakyn wagtda işjeň boljak täze goýmany ulanyň `event.target`we nyşana alyň.`event.relatedTarget`
`hidden.bs.tab`	Bu waka täze goýma görkezilenden soň ýanýar (we şeýlelik bilen öňki işjeň goýma gizlenýär). Öňki işjeň goýmany we täze işjeň goýmany degişlilikde ulanyň `event.target`we nyşana alyň.`event.relatedTarget`
`show.bs.tab`	Bu waka tab goýmasynda ýanýar, ýöne täze goýma görkezilmänkä. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň `event.target`we nyşana alyň.`event.relatedTarget`
`shown.bs.tab`	Bu waka, görkezme görkezilenden soň tab goýmasynda ýanýar. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň `event.target`we nyşana alyň.`event.relatedTarget`

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})