Source

Navs

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

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.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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.

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Stíleanna atá ar fáil

Athraigh stíl .navchomhpháirt s le mionathruithe 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:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Ailínithe ar dheis le .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Ingearach

Stack do nascleanúint trí athrú ar an treo mhír flex leis an .flex-columnáirgiúlacht. An gá iad a chruachadh ar roinnt radharcanna ach ní ar áiteanna eile? Úsáid na leaganacha sofhreagracha (m.sh., .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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 .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Pills

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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 gach spás cothrománach áitithe, ach níl an leithead céanna ag gach mír loingseoireachta.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Nuair a bhíonn <nav>nascleanúint bunaithe ar úsáid agat, bí cinnte go gcuimsítear .nav-itemar na hancairí.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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 nascleanúna ar an leithead céanna.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Cosúil leis an .nav-fillsampla ag baint úsáide as <nav>nascleanúint -bhunaithe, a bheith cinnte a chur san áireamh .nav-itemar an ancairí.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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 do chomhéadain dhinimiciúla tábáilte, mar a thuairiscítear i gCleachtais Údaraithe WAI ARIA . Féach ar iompar JavaScript le haghaidh comhéadain dhinimiciúla tabbed sa chuid seo mar shampla.role="tablist"role="tab"role="tabpanel"

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Pills le dropdowns

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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í agus piollaí loingseoireachta a leathnú chun pannaí cluaisíní d'ábhar áitiúil a chruthú, fiú trí bhiachláir anuas.

Má tá ár JavaScript á thógáil agat ón bhfoinse, teastaíonnutil.js .

Teastaíonn , , , , , , , , agus tréithe breise le comhéadain dhinimiciúla tabbed, mar a thuairiscítear i gCleachtais Údaraithe WAI ARIA , 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).role="tablist"role="tab"role="tabpanel"aria-

Tabhair faoi deara nár cheart go mbeadh roghchláir anuas i gcomhéadain dhinimiciúla cluaisíní , mar go gcruthaíonn sé seo fadhbanna inúsáidteachta agus inrochtaineachta araon. Ó thaobh inúsáidteachta de, is féidir mearbhall a chur ar an bhfíric nach bhfuil eilimint truicir 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.

Denim amh is dócha nár chuala tú trácht orthu jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth máistir cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit búistéir retro keffiyeh dreamcatcher synth. Geansaí Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan apparel Meiriceánach, búistéir voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

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.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

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

Mar thoradh ar occaecat ullamco amet non eiusmod nostrud dolore irure teagmhas est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupiddatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Agus le pills ingearach.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur labourum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit molit pariatur. Deserunt non laborum enim et cillum eu deserunt ach amháin an teagmhas is lú.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

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 ach trí eilimint a shonrú data-toggle="tab"nó data-toggle="pill"ar eilimint. Ú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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

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

Trí JavaScript

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

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third 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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

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 .

$().cluaisín

Gníomhachtaíonn eilimint tab agus coimeádán ábhar. Ba cheart go mbeadh nód coimeádán data-targetnó hrefnód dírithe ar an gcluaisín sa DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

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

<script>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

.tab('taispeáin')

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.tabdtarlaíonn an teagmhas).

$('#someTab').tab('show')

.cluaisín ('diúscairt')

Scriosann cluaisín eilimint.

Imeachtaí

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

  1. hide.bs.tab(ar an gcluaisín gníomhach reatha)
  2. show.bs.tab(ar an gcluaisín le taispeáint)
  3. hidden.bs.tab(ar an gcluaisín gníomhach roimhe seo, an ceann céanna leis an hide.bs.tabimeacht)
  4. 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
taispeáin.bs.cluaisín Teann an teagmhas seo ar thaispeántas cluaisíní, ach sula dtaispeántar an cluaisín nua. Úsáid event.targetagus event.relatedTargetchun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.
taispeántar.bs.cluaisín Teann an teagmhas seo ar thaispeántas cluaisíní tar éis cluaisín a thaispeáint. Úsáid event.targetagus event.relatedTargetchun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.
folaigh.bs.cluaisín 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.targetagus event.relatedTargetchun an cluaisín gníomhach reatha agus an cluaisín nua go luath le bheith gníomhach a dhíriú, faoi seach.
i bhfolach.bs.cluaisín Lasann 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.targetagus event.relatedTargetchun an cluaisín gníomhach roimhe seo agus an cluaisín gníomhach nua a dhíriú, faoi seach. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})