Dokumentācija un piemēri Bootstrap jaudīgajai, atsaucīgajai navigācijas galvenei, navigācijas joslai. Ietver atbalstu zīmola veidošanai, navigācijai un citam, tostarp atbalstam mūsu sabrukšanas spraudnim.
Kā tas strādā
Lūk, kas jums jāzina pirms darba sākšanas ar navigācijas joslu:
Navigācijas joslām ir nepieciešams iesaiņojums .navbarar .navbar-expand{-sm|-md|-lg|-xl}, lai pielāgotu sabrukšanas un krāsu shēmu klases.
Navigācijas joslas un to saturs pēc noklusējuma ir mainīgi. Izmantojiet papildu konteinerus , lai ierobežotu to horizontālo platumu.
Izmantojiet mūsu atstarpes un elastīgās lietderības klases, lai kontrolētu atstarpi un līdzinājumu navigācijas joslās.
Navigācijas joslas pēc noklusējuma ir atsaucīgas, taču varat tās viegli modificēt, lai to mainītu. Reakcijas darbība ir atkarīga no mūsu Collapse JavaScript spraudņa.
Drukāšanas laikā navigācijas joslas pēc noklusējuma ir paslēptas. Piespiediet tos drukāt, .d-printpievienojot .navbar. Skatiet displeja lietderības klasi.
Nodrošiniet pieejamību, izmantojot <nav>elementu, vai, ja izmantojat vispārīgāku elementu, piemēram, <div>, pievienojiet role="navigation"katrai navigācijas joslai, lai to skaidri identificētu kā orientieri palīgtehnoloģiju lietotājiem.
Lasiet tālāk, lai iegūtu piemēru un atbalstīto apakškomponentu sarakstu.
Atbalstīts saturs
Navigbars ir aprīkots ar iebūvētu atbalstu nedaudzām apakškomponentiem. Pēc vajadzības izvēlieties kādu no šīm iespējām:
.navbar-brandjūsu uzņēmuma, produkta vai projekta nosaukumam.
.navbar-navpilna augstuma un vieglai navigācijai (ieskaitot atbalstu nolaižamajām izvēlnēm).
.navbar-togglerizmantošanai ar mūsu sakļautības spraudni un citām navigācijas pārslēgšanas darbībām.
.form-inlinejebkura veida vadīklām un darbībām.
.navbar-textvertikāli centrētu teksta virkņu pievienošanai.
.collapse.navbar-collapsenavigācijas joslas satura grupēšanai un slēpšanai pēc vecāka pārtraukuma punkta.
Šis ir visu apakškomponentu piemērs, kas iekļauts adaptīvā gaismas tematikas navigācijas joslā, kas automātiski sakļaujas lg(lielajā) pārtraukuma punktā.
Šajā piemērā tiek izmantotas krāsu ( bg-light) un atstarpju ( my-2, my-lg-0, mr-sm-0, my-sm-0) lietderības klases.
Zīmols
.navbar-brandVar lietot lielākajai daļai elementu, taču enkurs darbojas vislabāk, jo dažiem elementiem var būt nepieciešamas utilīta klases vai pielāgoti stili .
Lai pievienotu attēlus, .navbar-brandvienmēr būs nepieciešami pielāgoti stili vai utilītas, lai tie būtu pareizi izmēri. Šeit ir daži piemēri, ko demonstrēt.
Nav
Navigācijas joslas navigācijas saites ir balstītas uz mūsu .navopcijām ar savām modifikācijas klasēm, un tām ir jāizmanto pārslēgšanas klases , lai nodrošinātu pareizu atsaucību. Navigācija navigācijas joslās arī palielināsies, lai aizņemtu pēc iespējas vairāk horizontālās vietas, lai jūsu navigācijas joslas saturs būtu droši saskaņots.
Aktīvie stāvokļi — ar .active— lai norādītu, ka pašreizējo lapu var lietot tieši .nav-links vai to tiešajiem vecākiem .nav-item.
Un, tā kā mēs izmantojam klases mūsu navigācijas sistēmām, jūs varat pilnībā izvairīties no uz sarakstu balstītas pieejas, ja vēlaties.
Varat arī izmantot nolaižamās izvēlnes navigācijas joslā. Nolaižamajām izvēlnēm pozicionēšanai ir nepieciešams iesaiņojuma elements, tāpēc noteikti izmantojiet atsevišķus un ligzdotus elementus, .nav-itemkā .nav-linkparādīts tālāk.
Veidlapas
Novietojiet dažādas veidlapas vadīklas un komponentus navigācijas joslā ar .form-inline.
Tūlītējie pakārtotie elementi tiek .navbarizmantoti elastīgā izkārtojumā, un pēc noklusējuma tie tiks izmantoti justify-content: space-between. Ja nepieciešams, izmantojiet papildu elastīgās utilītas , lai pielāgotu šo darbību.
Darbojas arī ievades grupas:
Šajās navigācijas joslas formās tiek atbalstītas arī dažādas pogas. Tas ir arī lielisks atgādinājums, ka vertikālās izlīdzināšanas utilītas var izmantot dažādu izmēru elementu līdzināšanai.
Teksts
Navigācijas joslās var būt teksta fragmenti, izmantojot .navbar-text. Šī klase pielāgo teksta virkņu vertikālo līdzinājumu un horizontālo atstarpi.
Ja nepieciešams, sajauciet un saskaņojiet ar citiem komponentiem un utilītprogrammām.
Krāsu shēmas
Navigācijas joslas tēmu veidošana nekad nav bijusi vienkāršāka, pateicoties tematisko klašu un background-colorutilītu kombinācijai. Izvēlieties kādu no .navbar-lightlietošanai ar gaišām fona krāsām vai .navbar-darktumšām fona krāsām. Pēc tam pielāgojiet, izmantojot .bg-*utilītas.
Kad konteiners atrodas navigācijas joslā, tā horizontālais polsterējums tiek noņemts pārtraukuma punktos, kas ir zemāki par jūsu norādīto .navbar-expand{-sm|-md|-lg|-xl}klasi. Tas nodrošina, ka, kad navigācijas josla ir sakļauta, mēs nevajadzīgi nepalielināsim polsterējumu apakšējās skata vietās.
Izvietojums
Izmantojiet mūsu pozīciju utilītas , lai novietotu navigācijas joslas nestatiskās pozīcijās. Izvēlieties fiksētu uz augšu, fiksētu uz leju vai pielīmētu augšpusē (ritina ar lapu, līdz tā sasniedz augšdaļu, pēc tam paliek tur). Fiksētās navigācijas joslas izmanto position: fixed, kas nozīmē, ka tās tiek izņemtas no parastās DOM plūsmas, un tām var būt nepieciešams pielāgots CSS (piemēram, padding-topuz <body>), lai novērstu pārklāšanos ar citiem elementiem.
Navigācijas joslas var izmantot .navbar-toggler, .navbar-collapseun .navbar-expand{-sm|-md|-lg|-xl}klases, lai mainītu, kad to saturs sakļaujas aiz pogas. Kombinācijā ar citām utilītprogrammām varat viegli izvēlēties, kad rādīt vai slēpt konkrētus elementus.
Navigācijas joslām, kas nekad nesakļaujas, pievienojiet .navbar-expandklasi navigācijas joslā. Navigācijas joslām, kas vienmēr sakļaujas, nepievienojiet nevienu .navbar-expandklasi.
Pārslēdzējs
Navigācijas joslas pārslēgi pēc noklusējuma ir līdzināti pa kreisi, taču, ja tie seko kādam brālim, piemēram .navbar-brand, , tie tiks automātiski līdzināti pa labi. Mainot marķējumu, tiks mainīts pārslēgšanas slēdža izvietojums. Tālāk ir sniegti dažādu pārslēgšanas stilu piemēri.
Bez .navbar-brandzemākā pārtraukuma punkta:
Kreisajā pusē ir redzams zīmola nosaukums un labajā pusē ir pārslēdzējs:
Ar pārslēdzēju kreisajā pusē un zīmola nosaukumu labajā pusē:
Ārējais saturs
Dažreiz vēlaties izmantot sakukšanas spraudni, lai aktivizētu slēptu saturu citviet lapā. Tā kā mūsu spraudnis darbojas uz idun data-targetatbilst, tas ir viegli izdarāms!