Navs
Doiciméadú agus samplaí le haghaidh 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 .nav
go 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- .nav
chomhphá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.
.nav
Ní chuimsíonn
an bonn-
chomhpháirt aon .active
stá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">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 .nav
hú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">Disabled</a>
</nav>
Stíleanna atá ar fáil
Athraigh stíl .nav
chomhphá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">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">Disabled</a>
</li>
</ul>
Ingearach
Stack do nascleanúint tríd an treo flex mír a athrú leis an .flex-column
bhfóntas. 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">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">Disabled</a>
</nav>
Cluaisíní
Tógann sé an bunseoltán ó thuas agus cuireann sé leis an .nav-tabs
rang 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">Disabled</a>
</li>
</ul>
Pills
Tóg an HTML céanna sin, ach úsáid .nav-pills
ina 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">Disabled</a>
</li>
</ul>
Líon agus údar
Cuir iallach ar do .nav
chuid á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-item
chuid 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">Disabled</a>
</li>
</ul>
Agus tú ag baint úsáide as <nav>
nascleanúint -bhunaithe, is féidir leat a fhágáil ar lár go sábháilte .nav-item
mar is gá ach amháin le haghaidh eilimintí .nav-link
stílithe .<a>
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" 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-fill
mé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">Disabled</a>
</li>
</ul>
Cosúil leis an .nav-fill
sampla ag baint úsáide as <nav>
nascleanúint -bhunaithe.
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" 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.
<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">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-tabs
rang, , 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.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-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">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-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">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.js
gcomhad tiomsaithe - chun ár gcuid cluaisíní loingseoireachta agus piollaí a leathnú chun pannaí tabbable d'ábhar áitiúil a chruthú.
Má tá ár JavaScript á thógáil agat ón bhfoinse, teastaíonnutil.js
.
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>
Ábhar sealbhóir áitribh don phainéal cluaisíní. Baineann an ceann seo leis an gcluaisín baile. Tógann sí míle ar airde thú, chomh hard sin, ‘toisc go bhfuil an aoibh gháire idirnáisiúnta amháin sin uirthi. Tá strainséir i mo leaba, tá puntáil i mo cheann. Ó níl. I saol eile chuirfinn ort fanacht. 'Cúis mé, tá mé in ann rud ar bith. Oiriúnach do mo cath corónach. A úsáidtear chun deoch do thuismitheoirí a ghoid agus tóg go dtí an díon. Ton, tan aclaí agus réidh, cas suas é faoi deara go bhfuil sé trom. Tá a grá cosúil le druga. Ceapaim go ndearna mé dearmad go raibh rogha agam.
Ábhar sealbhóir áitribh don phainéal cluaisíní. Baineann an ceann seo leis an gcluaisín próifíle. Tá an ailtireacht is fearr agat. Stampaí pas, tá sí cosmopolitan. Mín, úr, fíochmhar, fuaireamar faoi ghlas é. Níor bheartaigh riamh go mbeadh lá amháin á chailliúint agam. Itheann sí do chroí amach. Tá do phóg Cosmaí, tá gach gluaiseacht draíochta. Ciallaíonn mé na cinn, ciallóidh mé mar tá sí an ceann. Beannachtaí a ngaolta déanaimis turas. Níl le déanamh ach an oíche a bheith agat mar an 4 Iúil! Ach b'fhearr leat dul amú.
Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</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">
<button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</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">...</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.
Ábhar sealbhóir áitribh don phainéal cluaisíní. Baineann an ceann seo leis an gcluaisín baile. Tógann sí míle ar airde thú, chomh hard sin, ‘toisc go bhfuil an aoibh gháire idirnáisiúnta amháin sin uirthi. Tá strainséir i mo leaba, tá puntáil i mo cheann. Ó níl. I saol eile chuirfinn ort fanacht. 'Cúis mé, tá mé in ann rud ar bith. Oiriúnach do mo cath corónach. A úsáidtear chun deoch do thuismitheoirí a ghoid agus tóg go dtí an díon. Ton, tan aclaí agus réidh, cas suas é faoi deara go bhfuil sé trom. Tá a grá cosúil le druga. Ceapaim go ndearna mé dearmad go raibh rogha agam.
Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</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">...</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.
Ábhar sealbhóir áitribh don phainéal cluaisíní. Baineann an ceann seo leis an gcluaisín baile. Chonaic tú lár na cathrach ag canadh na Gormacha. Féach leat ciorcal a chur ar an draein. Cén fáth nach ligeann tú dom stop a chur leis? Is trom an ceann a chaitheann an choróin. Sea, déanaimid aingil ag caoineadh, ag cur báistí anuas ar domhan ó thuas. Ag iarraidh an seó a fheiceáil i 3D, scannán. An mbraitheann tú riamh, dar leat chomh tanaí páipéir. Tá nó níl, b'fhéidir.
Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-messages-tab" data-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</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 trí eilimint a shonrú data-toggle="tab"
nó data-toggle="pill"
ar eilimint amháin. Úsáid na tréithe sonraí seo ar .nav-tabs
nó .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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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">...</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 button').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Is féidir leat cluaisíní aonair a ghníomhachtú ar go leor bealaí:
$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab
Éifeacht céimnithe
Chun cluaisíní a dhéanamh céimnithe isteach, cuir .fade
le gach .tab-pane
. Ní mór go mbeadh ar an gcéad phána cluaisín freisin .show
an 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 chomh luath agus 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 tréith ag cluaisín data-target
nó, má tá nasc á úsáid agat, a href
dhíríonn ar nód coimeádáin sa DOM.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</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 button').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.tab
dtarlaí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:
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 anhide.bs.tab
imeacht)shown.bs.tab
(ar an gcluaisín nua-ghníomhach díreach taispeánta, mar an gcéanna leis anshow.bs.tab
imeacht)
Mura raibh aon chluaisín gníomhach cheana féin, ní dhéanfar an hide.bs.tab
agus na hidden.bs.tab
himeachtaí 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.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ú. |
taispeántar.bs.cluaisín | 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ú. |
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.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. |
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.target agus event.relatedTarget chun an cluaisín gníomhach roimhe seo agus an cluaisín gníomhach nua a dhíriú, faoi seach. |
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})