Nascleanúint agus cluaisíní

Doiciméadú agus samplaí le haghaidh conas comhpháirteanna loingseoireachta san áireamh Bootstrap a úsáid.

Ar an leathanach seo

Bonn nav

Roinneann an nascleanúint atá ar fáil i Bootstrap marcáil ghinearálta agus stíleanna, ón mbunrang .navgo dtí na stáit ghníomhacha agus na stáit faoi mhíchumas. Babhtáil ranganna mionathraithe chun aistriú idir gach stíl.

Tógtar an bun- .navchomhpháirt le flexbox agus soláthraíonn sé bunús láidir chun gach cineál comhpháirteanna loingseoireachta a thógáil. Áiríonn sé roinnt sáruithe stíle (chun oibriú le liostaí), roinnt stuáil nasc le haghaidh limistéir buailte níos mó, agus stíliú bunúsach faoi mhíchumas.

.navNí chuimsíonn an bonn- chomhpháirt aon .activestát. Áirítear ar na samplaí seo a leanas an rang, go príomha chun a léiriú nach spreagann an rang áirithe seo aon stíliú speisialta.

Chun an staid ghníomhach a chur in iúl do theicneolaíochtaí cúnta, bain úsáid as an aria-currentaitreabúid - ag baint úsáide as an pageluach don leathanach reatha, nó truedon mhír reatha i sraith.

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>

Baintear úsáid as ranganna ar fud, agus mar sin is féidir le do mharcáil a bheith thar a bheith solúbtha. Bain úsáid as <ul>mar atá thuas, <ol>má tá ord na n-earraí tábhachtach, nó rollaigh do chuid féin le <nav>heilimint. Toisc go n-iompraíonn na .navhúsáidí display: flex, iompraíonn naisc nav mar a bheadh míreanna nascleanúna, ach gan an marcáil bhreise.

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>

Stíleanna atá ar fáil

Athraigh stíl .navchomhpháirt s le modhnóirí agus le fóntais. Measc agus meaitseáil mar is gá, nó tóg do chuid féin.

Ailíniú cothrománach

Athraigh ailíniú cothrománach do sheoltáin le fóntais flexbox . De réir réamhshocraithe, tá navs ailínithe ar chlé, ach is féidir leat iad a athrú go héasca go lár nó ailínithe ar dheis.

Láraithe le .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>

Ailínithe ar dheis le .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>

Ingearach

Stack do nascleanúint tríd an treo flex mír a athrú leis an .flex-columnbhfóntas. An gá iad a chruachadh ar roinnt radharcanna ach ní ar áiteanna eile? Úsáid na leaganacha sofhreagracha (m.sh., .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>

Mar is gnáth, is féidir loingseoireacht ingearach a dhéanamh gan <ul>s, freisin.

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>

Cluaisíní

Tógann sé an bunseoltán ó thuas agus cuireann sé leis an .nav-tabsrang chun comhéadan tabbed a ghiniúint. Úsáid iad chun réigiúin tabbable a chruthú lenár mbreiseán JavaScript tab .

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>

Pills

Tóg an HTML céanna sin, ach úsáid .nav-pillsina ionad sin:

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>

Líon agus údar

Cuir iallach ar do .navchuid ábhar an leithead iomlán atá ar fáil a shíneadh ar cheann de dhá rang mionathraithe. Chun an spás go léir atá ar fáil a líonadh go comhréireach le do .nav-itemchuid s, bain úsáid as .nav-fill. Tabhair faoi deara go bhfuil an spás cothrománach ar fad áitithe, ach nach bhfuil an leithead céanna ag gach mír loingseoireachta.

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>

Agus tú ag úsáid <nav>nascleanúint bunaithe, is féidir leat a fhágáil ar lár go sábháilte .nav-itemmar is gá ach amháin le haghaidh eilimintí .nav-linkstílithe .<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>

Le haghaidh eilimintí ar chomhleithead, bain úsáid as .nav-justified. Beidh naisc nav áitithe ag gach spás cothrománach, ach murab ionann agus an .nav-fillméid thuas, beidh gach mír loingseoireachta ar an leithead céanna.

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>

Cosúil leis an .nav-fillsampla ag baint úsáide as <nav>nascleanúint -bhunaithe.

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>

Ag obair le fóntais flex

Más gá duit athruithe sofhreagracha nascleanúna, smaoinigh ar úsáid a bhaint as sraith d' fhóntais flexbox . Cé go bhfuil siad níos briathartha, cuireann na fóntais seo níos mó saincheaptha ar fáil thar phointí sofhreagracha. Sa sampla thíos, déanfar ár n-loingseoireachta a chruachadh ar an brisphointe is ísle, ansin cuir in oiriúint do leagan amach cothrománach a líonann an leithead atá ar fáil ag tosú ón brisphointe beag.

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>

Maidir le hinrochtaineacht

Má tá nascleanúint á n-úsáid agat chun barra nascleanúna a chur ar fáil, cinntigh go gcuirfidh tú role="navigation"leis an máthair-choimeád is loighciúil den <ul>, nó cuir <nav>eilimint thart ar an nascleanúint iomlán. Ná cuir an ról leis <ul>féin, mar go gcuirfeadh sé seo cosc ar theicneolaíochtaí cúnta a fhógairt mar liosta iarbhír.

Tabhair faoi deara nár cheart barraí nascleanúna, fiú má tá an stíl amhairc orthu mar chlubanna leis an .nav-tabsrang, , nó tréithe a thabhairt . Níl siad seo oiriúnach ach le haghaidh comhéadain dhinimiciúla le cluaisíní, mar a thuairiscítear i bpatrún cluaisíní an Treoir um Chleachtais Údaraithe ARIA . Féach ar iompar JavaScript le haghaidh comhéadain dhinimiciúla tabbed sa chuid seo mar shampla. Níl an tréith riachtanach ar chomhéadain dhinimiciúla tabbed ó láimhseálann ár JavaScript an staid roghnaithe tríd an táb gníomhach a chur leis.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

Ag baint úsáide as dropdowns

Cuir biachláir anuas leis le beagán HTML breise agus an breiseán JavaScript anuas .

Cluaisíní le dropdowns

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>

Pills le dropdowns

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

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann navs anois athróga áitiúla CSS ar .nav, .nav-tabs, agus .nav-pillsle haghaidh saincheaptha feabhsaithe fíor-ama. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

Ar an .navmbunrang:

  --#{$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};

Ar an .nav-tabsrang mionathraithe:

  --#{$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};

Ar an .nav-pillsrang mionathraithe:

  --#{$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};

Athróga 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;

Iompar javascript

Bain úsáid as an breiseán JavaScript cluaisín - cuir san áireamh é ina n-aonar nó tríd an bootstrap.jsgcomhad tiomsaithe - chun ár gcuid cluaisíní loingseoireachta agus piollaí a leathnú chun pannaí tabbable d'ábhar áitiúil a chruthú.

Seo roinnt inneachar áitsealbhóra an t-ábhar a bhaineann leis an gcluaisín Baile . Má chliceálann tú ar chluaisín eile, scoirfear infheictheacht an chinn seo don chéad cheann eile. Malartaíonn an cluaisín JavaScript ranganna chun infheictheacht agus stíliú an ábhair a rialú. Is féidir leat é a úsáid le cluaisíní, pills, agus aon .navnascleanúint faoi thiomáint ar bith eile.

Seo roinnt inneachair áitsealbhóra an t-ábhar a bhaineann leis an gcluaisín Próifíl . Má chliceálann tú ar chluaisín eile, scoirfear infheictheacht an chinn seo don chéad cheann eile. Malartaíonn an cluaisín JavaScript ranganna chun infheictheacht agus stíliú an ábhair a rialú. Is féidir leat é a úsáid le cluaisíní, pills, agus aon .navnascleanúint faoi thiomáint ar bith eile.

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>

Chun cabhrú le do chuid riachtanas a chur in oiriúint, oibríonn sé seo le <ul>marcáil bunaithe, mar a thaispeántar thuas, nó le haon mharcáil “rolladh do chuid féin” treallach. Tabhair faoi deara, má tá tú ag úsáid <nav>, nár cheart duit cur role="tablist"go díreach leis, mar sháródh sé seo ról dúchais na heiliminte mar shainchomhartha loingseoireachta. Ina áit sin, aistrigh go heilimint mhalartach (simplí sa sampla thíos <div>) agus cuir <nav>timpeall air.

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>

Oibríonn an breiseán tabs le pills freisin.

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>

Agus le pills ingearach. Go hidéalach, le haghaidh cluaisíní ingearacha, ba cheart duit a chur aria-orientation="vertical"leis an gcoimeádán liosta cluaisíní freisin.

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>

Inrochtaineacht

Tá , , , , agus tréithe breise ag teastáil ó chomhéadain dhinimiciúla cluaisíní, mar a thuairiscítear i bpatrún cluaisíní ARIA um Chleachtais Údaraithe , chun a struchtúr, a bhfeidhmiúlacht agus a staid reatha a chur in iúl d'úsáideoirí teicneolaíochtaí cúnta (amhail léitheoirí scáileáin). Mar dhea-chleachtas, molaimid úsáid a bhaint as eilimintí do na cluaisíní, mar is rialuithe iad seo a spreagann athrú dinimiciúil, seachas naisc a théann chuig leathanach nó suíomh nua.role="tablist"role="tab"role="tabpanel"aria-<button>

Ag teacht le patrún Cleachtais Údaraithe ARIA, ní fhaigheann ach an cluaisín atá gníomhach faoi láthair fócas an mhéarchláir. Nuair a thosófar an breiseán JavaScript, socrófar é tabindex="-1"ar gach rialú cluaisín neamhghníomhach. Nuair a bheidh fócas ar an gcluaisín atá gníomhach faoi láthair, gníomhóidh na heochracha cúrsóra an cluaisín roimhe / seo chugainn, agus an breiseán ag athrú an rovingtabindex dá réir. Tabhair faoi deara, áfach, nach ndéanann breiseán JavaScript idirdhealú idir liostaí cluaisíní cothrománacha agus ingearacha maidir le hidirghníomhaíochtaí eochair cúrsóra: beag beann ar threoshuíomh an liosta cluaisíní, téann an cúrsóir suas agus ar chlé chuig an gcluaisín roimhe seo, agus síos agus ar dheis téigh go dtí an cúrsóir . an chéad chluaisín eile.

Go ginearálta, chun nascleanúint méarchláir a éascú, moltar na painéil cluaisíní a dhíriú orthu féin freisin, ach amháin má tá an chéad eilimint ina bhfuil ábhar brí laistigh den phainéal cluaisíní infhócasaithe cheana féin. Ní dhéanann an breiseán JavaScript iarracht an ghné seo a láimhseáil - nuair is cuí, beidh ort do phainéil cluaisíní a dhéanamh go sonrach infhócasaithe trí tabindex="0"do mharcáil a chur isteach.

Ní thacaíonn an breiseán JavaScript le cluaisíní le comhéadain tábáilte ina bhfuil roghchláir anuas, toisc go mbíonn siad seo ina gcúis le fadhbanna inúsáidteachta agus inrochtaineachta. Ó thaobh inúsáidteachta de, is féidir mearbhall a chur ar an bhfíric nach bhfuil eilimint truicear an táb atá ar taispeáint faoi láthair le feiceáil láithreach (mar go bhfuil sé laistigh den roghchlár anuas dúnta). Ó thaobh na hinrochtaineachta de, níl aon bhealach ciallmhar ann faoi láthair chun an cineál seo tógála a mhapáil go patrún caighdeánach WAI ARIA, rud a chiallaíonn nach féidir é a dhéanamh intuigthe go héasca d'úsáideoirí na dteicneolaíochtaí cúnta.

Ag baint úsáide as tréithe sonraí

Is féidir leat nascleanúint cluaisín nó pillín a ghníomhachtú gan JavaScript a scríobh trí eilimint a shonrú data-bs-toggle="tab"nó data-bs-toggle="pill"ar eilimint amháin. Úsáid na tréithe sonraí seo ar .nav-tabsnó .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>

Trí JavaScript

Cumasaigh cluaisíní inchurtha trí JavaScript (ní mór gach cluaisín a ghníomhachtú ina n-aonar):

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

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

Is féidir leat cluaisíní aonair a ghníomhachtú ar go leor bealaí:

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

Éifeacht céimnithe

Chun cluaisíní a dhéanamh céimnithe isteach, cuir .fadele gach .tab-pane. Ní mór go mbeadh ar an gcéad phána cluaisín freisin .showan t-ábhar tosaigh a dhéanamh le feiceáil.

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

Modhanna

Modhanna agus aistrithe asincrónacha

Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir a luaithe a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .

Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais .

Gníomhachtaíonn sé d'inneachar mar eilimint cluaisíní.

Is féidir leat sampla cluaisín a chruthú leis an cruthaitheoir, mar shampla:

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

Modh	Cur síos
`dispose`	Scriosann cluaisín eilimint.
`getInstance`	Modh statach a ligeann duit an t-ús cluaisín a bhaineann le heilimint DOM a fháil, is féidir leat é a úsáid mar seo: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Modh statach a thugann ar ais ásc cluaisín a bhaineann le heilimint DOM nó a chruthaíonn ceann nua ar eagla nach dtosófaí é. Is féidir leat é a úsáid mar seo: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Roghnaíonn sé an cluaisín tugtha agus taispeánann sé an phána a bhaineann leis. Éiríonn aon chluaisín eile a roghnaíodh roimhe seo díroghnaithe agus tá an phána a bhaineann leis i bhfolach. Filleann sé ar an nglaoiteoir sula dtaispeántar an phána cluaisín (ie sula `shown.bs.tab`dtarlaíonn an teagmhas).

Imeachtaí

Agus cluaisín nua á thaispeáint, cuirtear na himeachtaí ar lasadh san ord seo a leanas:

hide.bs.tab(ar an gcluaisín gníomhach reatha)
show.bs.tab(ar an gcluaisín le taispeáint)
hidden.bs.tab(ar an gcluaisín gníomhach roimhe seo, an ceann céanna leis an hide.bs.tabimeacht)
shown.bs.tab(ar an gcluaisín nua-ghníomhach díreach taispeánta, mar an gcéanna leis an show.bs.tabimeacht)

Mura raibh aon chluaisín gníomhach cheana féin, ní dhéanfar an hide.bs.tabagus na hidden.bs.tabhimeachtaí a bhácáil.

Cineál imeachta	Cur síos
`hide.bs.tab`	Tineann an teagmhas seo nuair atá cluaisín nua le taispeáint (agus mar sin tá an cluaisín gníomhach roimhe seo le cur i bhfolach). Bain úsáid as `event.target`agus `event.relatedTarget`chun an cluaisín gníomhach reatha agus an cluaisín nua luath-le-bheith-ghníomhach a dhíriú, faoi seach.
`hidden.bs.tab`	Tineann an teagmhas seo tar éis cluaisín nua a thaispeáint (agus mar sin tá an cluaisín gníomhach roimhe seo i bhfolach). Úsáid `event.target`agus `event.relatedTarget`chun an cluaisín gníomhach roimhe seo agus an cluaisín gníomhach nua a dhíriú, faoi seach.
`show.bs.tab`	Teann an teagmhas seo ar thaispeántas cluaisíní, ach sula dtaispeántar an cluaisín nua. Úsáid `event.target`agus `event.relatedTarget`chun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.
`shown.bs.tab`	Teann an teagmhas seo ar thaispeántas cluaisíní tar éis cluaisín a thaispeáint. Úsáid `event.target`agus `event.relatedTarget`chun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.

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