Navs
Dokumentation och exempel för hur du använder Bootstraps medföljande navigationskomponenter.
Basnav
Navigering tillgänglig i Bootstrap delar generell uppmärkning och stilar, från basklassen .nav
till aktiva och inaktiverade tillstånd. Byt modifieringsklasser för att växla mellan varje stil.
Baskomponenten .nav
är byggd med flexbox och ger en stark grund för att bygga alla typer av navigationskomponenter. Den innehåller vissa stilöverstyrningar (för att arbeta med listor), en del länkutfyllnad för större träffområden och grundläggande funktionshindrade styling.
Baskomponenten .nav
inkluderar inte något .active
tillstånd. Följande exempel inkluderar klassen, främst för att visa att just denna klass inte utlöser någon speciell styling.
Klasser används genomgående, så din uppmärkning kan vara superflexibel. Använd <ul>
s som ovan, <ol>
om ordningen på dina föremål är viktig, eller rulla din egen med ett <nav>
element. Eftersom de .nav
använder display: flex
, fungerar nav-länkarna på samma sätt som nav-objekt, men utan extra uppmärkning.
Tillgängliga stilar
Ändra stilen på .nav
s-komponenten med modifierare och verktyg. Mixa och matcha efter behov, eller bygg din egen.
Horisontell linjering
Ändra den horisontella justeringen av din nav med flexbox-verktyg . Som standard är nav vänsterjusterade, men du kan enkelt ändra dem till mitt- eller högerjusterade.
Centrerad med .justify-content-center
:
Högerjusterad med .justify-content-end
:
Vertikal
Stapla din navigering genom att ändra flexobjektets riktning med .flex-column
verktyget. Behöver du stapla dem på vissa visningsportar men inte andra? Använd de responsiva versionerna (t.ex. .flex-sm-column
).
Som alltid är vertikal navigering <ul>
också möjlig utan s.
Flikar
Tar den grundläggande navigeringen ovanifrån och lägger till .nav-tabs
klassen för att skapa ett flikgränssnitt. Använd dem för att skapa flikområden med vårt JavaScript-plugin för flikar .
Biljard
Ta samma HTML, men använd .nav-pills
istället:
Fyll och motivera
Tvinga ditt .nav
innehåll att utöka den fulla tillgängliga bredden en av två modifieringsklasser. För att proportionellt fylla allt tillgängligt utrymme med dina .nav-item
s, använd .nav-fill
. Lägg märke till att allt horisontellt utrymme är upptaget, men inte alla navigeringsobjekt har samma bredd.
När du använder en <nav>
-baserad navigering, se till att inkludera .nav-item
på ankarna.
För element med lika bredd, använd .nav-justified
. Allt horisontellt utrymme kommer att upptas av nav-länkar, men till skillnad från .nav-fill
ovanstående kommer varje nav-objekt att ha samma bredd.
I likhet med .nav-fill
exemplet med en <nav>
-baserad navigering, se till att inkludera .nav-item
på ankarna.
Arbeta med flexverktyg
Om du behöver responsiva nav-varianter kan du överväga att använda en serie flexbox-verktyg . Även om de är mer omfattande erbjuder dessa verktyg större anpassning över responsiva brytpunkter. I exemplet nedan kommer vår nav att staplas på den lägsta brytpunkten och sedan anpassas till en horisontell layout som fyller den tillgängliga bredden från den lilla brytpunkten.
Angående tillgänglighet
Om du använder nav för att tillhandahålla ett navigeringsfält, se till att lägga till en role="navigation"
i den mest logiska överordnade behållaren för <ul>
, eller linda ett <nav>
element runt hela navigeringen. Lägg inte till rollen till sig <ul>
själv, eftersom detta skulle förhindra att den annonseras som en faktisk lista av hjälpmedel.
Observera att navigeringsfält, även om de är visuellt utformade som flikar med .nav-tabs
klassen, inte ska ges role="tablist"
, role="tab"
eller role="tabpanel"
attribut. Dessa är endast lämpliga för dynamiska flikar, som beskrivs i WAI ARIA Authoring Practices . Se JavaScript-beteende för dynamiska flikar i det här avsnittet för ett exempel.
Använder rullgardinsmenyn
Lägg till rullgardinsmenyer med lite extra HTML och rullgardinsmenyn JavaScript-plugin .
Flikar med rullgardinsmenyer
Piller med dropdowns
JavaScript-beteende
Använd fliken JavaScript-plugin – inkludera den individuellt eller genom den kompilerade bootstrap.js
filen – för att utöka våra navigeringsflikar och piller för att skapa flikar med lokalt innehåll, även via rullgardinsmenyer.
Om du bygger vårt JavaScript från källan kräverutil.js
det .
Dynamiska gränssnitt med flikar, som beskrivs i WAI ARIA Authoring Practices , kräver role="tablist"
, role="tab"
, role="tabpanel"
, och ytterligare aria-
attribut för att förmedla deras struktur, funktionalitet och nuvarande tillstånd till användare av hjälpmedelstekniker (som skärmläsare).
Observera att dynamiska flikar inte bör innehålla rullgardinsmenyer, eftersom detta orsakar både användbarhets- och tillgänglighetsproblem. Ur ett användbarhetsperspektiv kan det faktum att den aktuella visade flikens triggerelement inte är omedelbart synligt (eftersom det finns i den stängda rullgardinsmenyn) orsaka förvirring. Ur tillgänglighetssynpunkt finns det för närvarande inget vettigt sätt att kartlägga denna typ av konstruktion till ett standard WAI ARIA-mönster, vilket innebär att det inte lätt kan göras begripligt för användare av hjälpmedelsteknik.
Raw denim du förmodligen inte har hört talas om dem jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustasch cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby tröja eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerikanska kläder, slaktare 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ör att passa dina behov fungerar detta med <ul>
-baserad uppmärkning, som visas ovan, eller med valfri "rulla din egen" uppmärkning. Observera att om du använder <nav>
, bör du inte lägga role="tablist"
till direkt i den, eftersom detta skulle åsidosätta elementets ursprungliga roll som navigeringslandmärke. Byt istället till ett alternativt element (i exemplet nedan, en enkel <div>
) och linda <nav>
runt det.
Tabs-pluginet fungerar också med piller.
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt 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 cupidatat 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.
Och med vertikala piller.
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 laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.
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.
Använda dataattribut
Du kan aktivera en navigering med flikar eller piller utan att skriva något JavaScript genom att helt enkelt ange data-toggle="tab"
eller data-toggle="pill"
på ett element. Använd dessa dataattribut på .nav-tabs
eller .nav-pills
.
Via JavaScript
Aktivera flikar via JavaScript (varje flik måste aktiveras individuellt):
Du kan aktivera enskilda flikar på flera sätt:
Tona effekt
För att få flikar att tona in, lägg .fade
till varje .tab-pane
. Den första flikrutan måste också .show
göra det ursprungliga innehållet synligt.
Metoder
Asynkrona metoder och övergångar
Alla API - metoder är asynkrona och startar en övergång . De återvänder till den som ringer så snart övergången har påbörjats men innan den slutar . Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .
$().tab
Aktiverar ett flikelement och innehållsbehållare. Tab ska ha antingen en data-target
eller en href
inriktning på en containernod i DOM.
.tab('show')
Väljer den givna fliken och visar dess tillhörande ruta. Alla andra flikar som tidigare valts avmarkeras och dess tillhörande ruta döljs. Återgår till den som ringer innan flikrutan faktiskt har visats (dvs innan shown.bs.tab
händelsen inträffar).
.tab('dispose')
Förstör ett elements flik.
evenemang
När en ny flik visas aktiveras händelserna i följande ordning:
hide.bs.tab
(på den aktuella aktiva fliken)show.bs.tab
(på fliken som ska visas)hidden.bs.tab
(på föregående aktiva flik, samma som förhide.bs.tab
händelsen)shown.bs.tab
(på den nyligen aktiva fliken som just visades, samma som förshow.bs.tab
evenemanget)
Om ingen flik redan var aktiv kommer händelserna hide.bs.tab
och hidden.bs.tab
inte att aktiveras.
Event typ | Beskrivning |
---|---|
visa.bs.tab | Den här händelsen aktiveras vid flikvisning, men innan den nya fliken har visats. Använd event.target och event.relatedTarget för att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig). |
visad.bs.tab | Den här händelsen aktiveras vid flikvisning efter att en flik har visats. Använd event.target och event.relatedTarget för att rikta in den aktiva fliken respektive den föregående aktiva fliken (om tillgänglig). |
hide.bs.tab | Den här händelsen aktiveras när en ny flik ska visas (och därmed den tidigare aktiva fliken ska döljas). Använd event.target och event.relatedTarget för att rikta in den aktuella aktiva fliken respektive den nya snart-aktiva fliken. |
hidden.bs.tab | Den här händelsen aktiveras efter att en ny flik har visats (och den tidigare aktiva fliken döljs därför). Använd event.target och event.relatedTarget för att rikta in den tidigare aktiva fliken respektive den nya aktiva fliken. |