SourceNavbar
Amaxwebhu kunye nemizekelo ye-Bootstrap enamandla, i-header yokukhangela ephendulayo, i-navbar. Iquka inkxaso yokubeka uphawu, ukukhangela, kunye nokunye, kuquka nenkxaso yeplagin yethu yokuwa.
Nantsi into ekufuneka uyazi ngaphambi kokuba uqalise nge-navbar:
- Iibhari zeNavbar zifuna ukusonga
.navbar
kunye neeklasi zesikimu sombala esiphendulayo..navbar-expand{-sm|-md|-lg|-xl}
- Ii-Navbar kunye nemixholo yazo ilulwelo ngokungagqibekanga. Sebenzisa izikhongozeli ozikhethelayo ukunciphisa ububanzi bazo obuthe tye.
- Sebenzisa izithuba zethu kunye neeklasi eziluncedo eziguquguqukayo zokulawula izithuba kunye nolungelelwaniso ngaphakathi kwee-navbar .
- Ii-Navbars ziphendula ngokungagqibekanga, kodwa unokuziguqula ngokulula ukuyitshintsha loo nto. Indlela yokuziphatha ephendulayo ixhomekeke kwiplagi yethu yokuLahla yeJavaScript.
- Iibar zeNavbar zifihlwa ngokungagqibekanga xa kushicilelwa. Nyanzelela ukuba zishicilelwe ngokongeza kwifayile
.d-print
ye .navbar
. Bona iklasi eluncedo yokubonisa .
- Qinisekisa ukufikeleleka ngokusebenzisa
<nav>
isiqalelo okanye, ukuba usebenzisa into eqhelekileyo efana ne <div>
, yongeza i role="navigation"
navbar nganye ukuyichonga ngokucacileyo njengommandla obalulekileyo wabasebenzisi boncedo lobuchwephesha.
Funda ngokomzekelo kunye noluhlu lwamacandelwana axhaswayo.
I-Navbars iza nenkxaso eyakhelwe-ngaphakathi kwiinxalenye ezincinci. Khetha kwezi zilandelayo njengoko kufuneka:
.navbar-brand
yenkampani yakho, imveliso, okanye igama leprojekthi.
.navbar-nav
kubude obugcweleyo kunye nokukhanya okulula (kubandakanya inkxaso yokwehla).
.navbar-toggler
ukuze sisetyenziswe kunye neplagin yethu yokuwa kunye nezinye iindlela zokuziphatha zokuguqula .
.form-inline
kulo naluphi na uhlobo lolawulo kunye nezenzo.
.navbar-text
yokongeza imitya ethe nkqo embindini wokubhaliweyo.
.collapse.navbar-collapse
ngokwamaqela kunye nokufihla imixholo ye-navbar nge-breakpoint yomzali.
Nanku umzekelo wawo onke amacandelwana aqukiweyo kwi-navbar enemixholo yokukhanya ephendulayo ethi yonakale ngokuzenzekelayo kwindawo lg
(enkulu) yokwahlukana.
Lo mzekelo usebenzisa umbala ( bg-light
) kunye nezithuba ( my-2
, my-lg-0
, mr-sm-0
, my-sm-0
) iiklasi eziluncedo.
Inokusetyenziswa .navbar-brand
kwizinto ezininzi, kodwa i-ankile isebenza ngcono njengoko ezinye izinto zinokufuna iiklasi eziluncedo okanye izimbo zesiko.
Ukongeza imifanekiso .navbar-brand
kuya kuhlala kufuna izitayile eziqhelekileyo okanye izinto eziluncedo kubungakanani obufanelekileyo. Nantsi eminye imizekelo yokubonisa.
Ikhonkco lokujonga kwiNavbar yakhela .nav
kwiinketho zethu ngodidi lwazo lwesilungisi kwaye zifuna ukusetyenziswa kweeklasi ze-toggler kwisitayile esiphendulayo esifanelekileyo. Ukukhangela kwi-navbar kuya kukhula kuthathe indawo ethe tye kangangoko kunokwenzeka ukugcina imixholo yakho ye-navbar ilungelelaniswe ngokukhuselekileyo.
Iimeko ezisebenzayo-nge- .active
ukubonisa iphepha langoku linokusetyenziswa ngokuthe ngqo ku- .nav-link
s okanye umzali wabo osondeleyo .nav-item
.
Kwaye ngenxa yokuba sisebenzisa iiklasi kwii-navs zethu, unokunqanda indlela esekwe kuluhlu ngokupheleleyo ukuba uyathanda.
Unokusebenzisa kwakhona ukwehla kwi-navbar nav yakho. Iimenu ezithotyiweyo zifuna into yokusonga yokubeka, ke qiniseka ukuba usebenzisa izinto ezahlukileyo kunye nezifakwe kwindlwane .nav-item
kwaye .nav-link
njengoko kubonisiwe ngezantsi.
Beka ulawulo lweefomu ezahlukeneyo kunye namalungu ngaphakathi kwebar ye-navbar nge .form-inline
.
Izinto zangoku zabantwana .navbar
ekusetyenzisweni koyilo oluguquguqukayo kwaye ziya kuhlala justify-content: between
. Sebenzisa izixhobo ezongezelelweyo eziguquguqukayo njengoko kufuneka ukulungisa le ndlela yokuziphatha.
Amaqela ongeniso ayasebenza, nawo:
Amaqhosha ahlukeneyo axhaswa njengenxalenye yezi fomu ze-navbar, nazo. Oku kukwasisikhumbuzo esihle sokuba izixhobo zolungelelwaniso ezithe nkqo zinokusetyenziselwa ukulungelelanisa izinto ezinobungakanani obahlukeneyo.
Iibar zeNavbar zinokuqulatha amasuntswana okubhaliweyo ngoncedo lwe .navbar-text
. Olu didi luhlengahlengisa ulungelelwaniso oluthe nkqo kunye nezithuba ezithe tye kwimitya yokubhaliweyo.
Hlanganisa kwaye udibanise nezinye izixhobo kunye nezinto eziluncedo njengoko kufuneka.
Ukwenza umxholo kwi-navbar akukaze kube lula ukubulela kwindibaniso yeeklasi ze-theming kunye background-color
nezinto eziluncedo. Khetha phakathi .navbar-light
kokusetyenziswa ngemibala ekhanyayo yangasemva, okanye .navbar-dark
imibala engasemva emnyama. Emva koko, yenza ngokwezifiso kunye .bg-*
nezixhobo.
Nangona kungafunekiyo, ungasonga i navbar kwi .container
ukuyibeka embindini kwiphepha okanye wongeze enye phakathi kwiziko kuphela imixholo ye navbar emileyo okanye engatshintshiyo ephezulu .
Xa isikhongozeli singaphakathi kwe-navbar yakho, i-padding yayo ethe tye iyasuswa kwiindawo zokuphumla ezisezantsi kunodidi lwakho oluxeliweyo .navbar-expand{-sm|-md|-lg|-xl}
. Oku kuqinisekisa ukuba asiphindwa kabini ekukhuselweni ngokungeyomfuneko kwiindawo zokujonga ezisezantsi xa i-navbar yakho iwile.
Sebenzisa indawo yethu eluncedo ukubeka ii-navbar kwindawo ezingezizo-static. Khetha ukusuka kwisigxina ukuya phezulu, ugxininise ukuya ezantsi, okanye unamathele phezulu (umqulu kunye nephepha uze ufike phezulu, uze uhlale apho). Sebenzisa iinavbar ezizinzileyo position: fixed
, okuthetha ukuba zitsalwa kumsinga oqhelekileyo weDOM kwaye zinokufuna iCSS yesiko (umzekelo, padding-top
kwi <body>
) ukunqanda ukugqithelana nezinye izinto.
Kwakhona qaphela ukuba .sticky-top
isebenzisa position: sticky
, engaxhaswanga ngokupheleleyo kumkhangeli zincwadi ngamnye .
Ukuziphatha okuphendulayo
Iibar zeNavbar zinokusebenzisa .navbar-toggler
, .navbar-collapse
, kunye .navbar-expand{-sm|-md|-lg|-xl}
neeklasi ukutshintsha xa umxholo wabo usihla emva kweqhosha. Ngokudityaniswa nezinye izinto eziluncedo, unokukhetha ngokulula ixesha lokubonisa okanye ukufihla izinto ezithile.
Kwiinavbar ezingasoze zidilike, yongeza .navbar-expand
iklasi kwi navbar. Kwiinavbar ezihlala zisihla, musa ukongeza naluphi na .navbar-expand
uhlobo.
Iziguquli zeNavbar zilungelelaniswe ngokushiyekileyo, kodwa ukuba zilandela into yakowenu njenge .navbar-brand
, ziya kulungelelaniswa ngokuzenzekelayo ekunene. Ukubuyisela umva uphawu lwakho kuya kubuyisela umva ukubekwa kwesiguquli. Ngezantsi yimizekelo yeendlela ezahlukeneyo zokuguqula.
Ngaphandle .navbar-brand
kokuboniswa kweyona ndawo iphantsi yoqhawulo:
Ngegama lebrendi eliboniswe ekhohlo kunye ne-toggler ekunene:
Ngokuguqula ngasekhohlo kunye negama lebhrendi ekunene:
Ngamanye amaxesha ufuna ukusebenzisa iplagin yokuwa ukuze uqalise umxholo ofihliweyo kwenye indawo kwiphepha. Kuba iplagin yethu isebenza id
kwaye data-target
ihambelana, oko kwenziwa ngokulula!
Collapsed content
Toggleable via the navbar brand.