Navs fɔ di wan dɛn we de
Dokumɛnt ɛn ɛgzampul dɛn fɔ aw fɔ yuz Bootstrap in inklud nevigishɔn kɔmpɔnɛnt dɛn.
Navigishɔn we de na Bootstrap sheb jenɛral mak ɛn stayl dɛn, frɔm di bays .nav
klas to di aktif ɛn disabled stet dɛn. Swap modifya klas fɔ swich bitwin ɛni stayl.
Di bays .nav
kɔmpɔnɛnt dɛn bil wit fleksbɔks ɛn i de gi wan strɔng fawndeshɔn fɔ bil ɔl kayn nevigishɔn kɔmpɔnɛnt dɛn. I inklud sɔm stayl ɔvarayd dɛn (fɔ wok wit list dɛn), sɔm link pad fɔ big hit eria dɛn, ɛn besik disabled stayl.
Di bays .nav
kɔmpɔnɛnt nɔ de inklud ɛni .active
stet. Di ɛgzampul dɛn we de kam biɛn ya gɛt di klas, mɔ fɔ sho se dis patikyula klas nɔ de trig ɛni spɛshal stayl.
<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="#">Disabled</a>
</li>
</ul>
Klas dɛn de yuz ɔlsay, so yu mak kin bi supa fleksibul. Yuz <ul>
s lɛk ɔp, ɔ rol yu yon wit se wan <nav>
ɛlimɛnt. Bikɔs di .nav
yuz display: flex
dɛn , di nav link dɛn de biev di sem we aw di nav tin dɛn go biev, bɔt we nɔ gɛt di ɛkstra mak.
<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="#">Disabled</a>
</nav>
Chenj di stayl fɔ .nav
s kɔmpɔnɛnt wit modifya ɛn yutiliti. Miks ɛn mach as nid de, ɔ bil yu yon.
Chenj di ɔrizɔntal alaynɛshɔn fɔ yu nav wit flexbox yutiliti dɛn . Bay difɔlt, nav dɛn de alaynɛd na di lɛft, bɔt yu kin chenj dɛn izi wan to sɛnt ɔ rayt alaynɛd.
Sɛntral wit .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="#">Disabled</a>
</li>
</ul>
Rayt-alayn wit .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="#">Disabled</a>
</li>
</ul>
Stak yu nevigishɔn bay we yu chenj di fleks aytem dairekshɔn wit di .flex-column
yutiliti. Nid fɔ stak dɛn na sɔm viewport dɛn bɔt nɔto ɔda wan dɛn? Yuz di vɛshɔn dɛn we de ansa (ɛgz., .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="#">Disabled</a>
</li>
</ul>
As ɔltɛm, vertikal nevigishɔn pɔsibul witout <ul>
s, tu.
<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="#">Disabled</a>
</nav>
Tek di besik nav frɔm ɔp ɛn ad di .nav-tabs
klas fɔ jenarayz wan tab intafays. Yuz dɛn fɔ mek tab rijyɔn dɛn wit wi tab JavaSkript plɔgin .
<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="#">Disabled</a>
</li>
</ul>
Tek da sem HTML de, bɔt yuz .nav-pills
insted:
<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="#">Disabled</a>
</li>
</ul>
Fos yu .nav
's kɔntinyu fɔ ɛkstɛnd di ful avaylabl wit wan pan tu modifya klas dɛn. Fɔ ful-ɔp ɔl di ples we de wit yu .nav-item
s di rayt we, yuz .nav-fill
. Notis se ɔl di ɔrizɔntal spɛs de ɔkup, bɔt nɔto ɔl nav aytem gɛt di sem wit.
<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="#">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="#">Disabled</a>
</li>
</ul>
We yu de yuz <nav>
-based nevigishɔn, mek shɔ se yu put .nav-item
am na di ankɔ dɛn.
<nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>
Fɔ ikwal-wid ɛlimɛnt dɛn, yuz .nav-justified
. Ɔl di ɔrizɔntal spɛs go gɛt nav link dɛn, bɔt nɔ lɛk di wan dɛn we de .nav-fill
ɔp, ɛvri nav aytem go gɛt di sem wit.
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
Semweso lɛk di .nav-fill
ɛgzampul we de yuz <nav>
-based nevigishɔn, mek shɔ se yu put .nav-item
am na di ankɔ dɛn.
<nav class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>
If yu nid responsive nav variations, tink bɔt fɔ yuz wan siriɔs flexbox utilities . Wail mɔ verbose, dɛn yutiliti ya de gi big kɔstɔmayshɔn akɔdin to rispɔnsiv brekpɔynt dɛn. Insay di ɛgzampul we de dɔŋ ya, wi nav go stak na di brek pɔynt we smɔl pas ɔl, dɔn adap to wan ɔrizɔntal layout we de ful di wit we de stat frɔm di smɔl brek pɔynt.
<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="#">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="#">Disabled</a>
</nav>
If yu de yuz navs fɔ gi wan nevigishɔn bar, mek shɔ se yu ad a role="navigation"
to di mɔs lɔjik mama ɛn papa kɔntena fɔ di <ul>
, ɔ rap wan <nav>
ɛlimɛnt rawnd di wan ol nevigishɔn. Nɔ ad di wok to di <ul>
sɛf, bikɔs dis go mek dɛn nɔ anɔys am as rial list bay ɛp tɛknɔlɔji dɛn.
Notis se nevigishɔn bar dɛn, ivin if dɛn stayl dɛn we dɛn de si as tab dɛn wit di .nav-tabs
klas, dɛn nɔ fɔ gi dɛn role="tablist"
, role="tab"
ɔ role="tabpanel"
atribyut dɛn. Dis na onli aprכpriet fכ dinamik tab intafeys dεm, lεk aw dεn dεskrεb am na di WAI ARIA Authoring Practices . Si JavaSkript bihayvya fɔ dinamik tab intafeys dɛn na dis sɛkshɔn fɔ ɛgzampul.
Ad drɔpdɔwn mɛnyu dɛn wit smɔl ɛkstra HTML ɛn di drɔpdɔwn dɛn JavaSkript plɔgin .
<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="#">Disabled</a>
</li>
</ul>
<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="#">Disabled</a>
</li>
</ul>
Yuz di tab JavaSkript plɔgin—inklud am wan wan ɔ tru di bootstrap.js
fayl we dɛn dɔn kɔmpilayt—fɔ ɛkstɛnd wi nevigishɔn tab ɛn pils dɛn fɔ mek tab pan dɛn fɔ di lokal tin dɛn, ivin bay we yu yuz drɔpdɔwn mɛnyu dɛn.
If yu de bil wi JavaSkript frɔm sɔs, i nid fɔutil.js
.
Daynamik tab intafeys dɛn, as dɛn tɔk bɔt am na di WAI ARIA Ɔtorin Praktis dɛn , nid role="tablist"
, role="tab"
, role="tabpanel"
, ɛn ɔda aria-
atribyut dɛn fɔ mek dɛn ebul fɔ gi dɛn strɔkchɔ, funkshɔnaliti ɛn di stet we dɛn de naw to di wan dɛn we de yuz ɛp tɛnkɔlɔji dɛn (lɛk skrin rida dɛn).
Notis se dinamik tab intafeys dɛn nɔ fɔ gɛt drɔpdɔwn mɛnyu dɛn, bikɔs dis kin mek dɛn gɛt prɔblɛm dɛn fɔ yuz ɛn fɔ yuz am. Frɔm wan yusabiliti pɔynt, di tru tin se di tab we de sho naw in trig ɛlimɛnt nɔ de si wantɛm wantɛm (as i de insay di drɔpdɔwn mɛnyu we dɛn lɔk) kin mek pipul dɛn kɔnfyus. Frɔm wan aksesibiliti pɔynt fɔ si, naw, nɔ sɛnsful we nɔ de fɔ map dis kayn kɔnstrɔkshɔn to wan standad WAI ARIA patɛn, we min se dɛn nɔ go ebul fɔ mek am izi fɔ mek pipul dɛn we de yuz ɛp tɛknɔlɔji dɛn ɔndastand am izi wan.
Raw denim yu probabli noh yehri boht dem jean shorts Austin. Nesciunt tofu stumptown aliqua, retro sint masta klin. Mustache kliche tempor, wiliamsbɔg karls vegan ɛlvɛtika. Reprehenderit butcher retro keffiyeh drim kat sint. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip plesat salvia cillum iphone. Seitan aliquip quis kardigan american klos, butcher 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.
Fɔ ɛp fɔ fit yu nid, dis de wok wit <ul>
-based mak, lɛk aw dɛn sho ɔp, ɔ wit ɛni arbitrary “roll your own” mak. Notis se if yu de yuz <nav>
, yu nɔ fɔ ad role="tablist"
dairekt to am, bikɔs dis go ɔvalayz di ɛlimɛnt in nativ wok as nevigishɔn landmak. Bifo dat, chenj to wan ɔda ɛlimɛnt (insay di ɛgzampul we de dɔŋ ya, wan simpul <div>
) ɛn rap di <nav>
rawnd am.
Di tabs plɔgin de wok bak wit pils.
Konsekwat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt ofisia. Fugiat velit proident aliquip nisi incididunt nostrud eksasaiz proident est nisi. Irure magna elit komodo anim ex veniam kulpa eiusmod id nostrud sidon cupidat in veniam ad. Eiusmod consequat eu adipisisin minim animal alikwip kupidat kulpa ɛksɛptɔ quis. Occaecat sidon eu eksasaiz 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.
Ɛn wit vertikal pils dɛn.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit ɛksɛptɔr labɔrum qui. Id id reprehenderit sit est eu aliqua occaecat quis ɛn velit ɛksɛptɔr labɔrum mɔlit dolɔr eiusmod. Ipsum dolor in occaecat komodo ɛn voluptate minim reprehenderit mollit pariatur. Deserunt non labourum enim et cillum eu deserunt ekseptɔr ea incididunt minim ɔccaecat.
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.
Yu kin aktiv wan tab ɔ pil nevigishɔn we yu nɔ rayt ɛni JavaSkript bay we yu jɔs spɛsifa data-toggle="tab"
ɔ data-toggle="pill"
pan wan ɛlimɛnt. Yuz dɛn data atribyut dɛn ya na .nav-tabs
ɔ .nav-pills
.
Enable tabable tabs via JavaScript (ɛni tab nid fɔ aktiv wan wan):
Yu kin aktiv wan wan tab dɛn difrɛn we dɛn:
Fɔ mek di tab dɛn go fayn, ad .fade
to ɛni wan pan dɛn .tab-pane
. Di fɔs tab pan fɔ gɛt bak .show
fɔ mek di fɔs tin dɛn we de insay de sho.
Asynchronous mεtכd dεm εn transishכn dεm
Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .
Aktiv wan tab ɛlimɛnt ɛn kɔntinyu kɔntena. Tab fɔ gɛt ɛni wan pan wan data-target
ɔ wan href
we de tɔch wan kɔntena node na di DOM.
Pik di tab we dɛn gi ɛn sho di say we gɛt fɔ du wit am. Ɛni ɔda tab we dɛn bin dɔn pik bifo tɛm nɔ kin pik ɛn di pan we gɛt fɔ du wit am kin ayd. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tab pan (dat na bifo di shown.bs.tab
tin apin).
Destroy wan element in tab.
We yu de sho nyu tab, di tin dɛn we de apin de faya insay di ɔda we we de dɔŋ ya:
hide.bs.tab
(na di tab we de wok naw)show.bs.tab
(na di tab we dɛn go sho)hidden.bs.tab
(na di fɔs aktif tab, di sem wan we bin de fɔ dihide.bs.tab
ivin)shown.bs.tab
(na di nyu-aktiv tab we jɔs sho, di sem wan we de fɔ dishow.bs.tab
ivin)
If no tab nɔ bin dɔn ɔlrɛdi aktif, den di hide.bs.tab
ɛn hidden.bs.tab
ivin dɛn nɔ go faya.
Di kayn tin we apin | Tɔk bɔt |
---|---|
sho.bs.tab fɔ sho | Dis ivent de faya pan tab sho, bɔt bifo dɛn dɔn sho di nyu tab. Yuz event.target ɛn event.relatedTarget fɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan. |
we dɛn sho.bs.tab | Dis ivent de faya pan tab sho afta dɛn dɔn sho wan tab. Yuz event.target ɛn event.relatedTarget fɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan. |
ayd.bs.tab fɔ di wan dɛn we de | Dis ivent de faya we dɛn fɔ sho nyu tab (ɛn so di fɔs aktif tab fɔ ayd). Yuz event.target ɛn event.relatedTarget fɔ tɔch di tab we de wok naw ɛn di nyu tab we go aktiv jisnɔ, rispɛktful wan. |
di tab we dɛn ayd.bs | Dis ivent de faya afta dɛn dɔn sho nyu tab (ɛn so di fɔs aktif tab de ayd). Yuz event.target ɛn event.relatedTarget fɔ tɔch di fɔs aktif tab ɛn di nyu aktif tab, rispɛktful wan. |