Dokumentasyon at mga halimbawa para sa makapangyarihan, tumutugon na header ng nabigasyon ng Bootstrap, ang navbar. May kasamang suporta para sa pagba-brand, pag-navigate, at higit pa, kabilang ang suporta para sa aming collapse plugin.
Paano ito gumagana
Narito ang kailangan mong malaman bago magsimula sa navbar:
Ang mga Navbar ay nangangailangan ng isang pambalot para .navbarsa .navbar-expand{-sm|-md|-lg|-xl}tumutugon na pagbagsak at mga klase ng scheme ng kulay.
Ang mga Navbar at ang kanilang mga nilalaman ay tuluy-tuloy bilang default. Gumamit ng mga opsyonal na lalagyan upang limitahan ang kanilang pahalang na lapad.
Gamitin ang aming spacing at flex utility class para sa pagkontrol ng spacing at alignment sa loob ng mga navbar.
Ang mga Navbar ay tumutugon bilang default, ngunit madali mong mababago ang mga ito upang baguhin iyon. Nakadepende ang tumutugon na gawi sa aming Collapse JavaScript plugin.
Ang mga Navbar ay nakatago bilang default kapag nagpi-print. Pilitin ang mga ito na i-print sa pamamagitan ng pagdaragdag .d-printsa .navbar. Tingnan ang klase ng display utility.
Tiyakin ang pagiging naa-access sa pamamagitan ng paggamit ng <nav>elemento o, kung gumagamit ng mas generic na elemento gaya ng <div>, magdagdag ng a role="navigation"sa bawat navbar upang tahasang tukuyin ito bilang landmark na rehiyon para sa mga gumagamit ng mga pantulong na teknolohiya.
Magbasa para sa isang halimbawa at listahan ng mga sinusuportahang sub-bahagi.
Sinusuportahang nilalaman
Ang mga Navbar ay may kasamang built-in na suporta para sa isang dakot ng mga sub-bahagi. Pumili sa mga sumusunod kung kinakailangan:
.navbar-brandpara sa iyong kumpanya, produkto, o pangalan ng proyekto.
.navbar-navpara sa isang buong taas at magaan na nabigasyon (kabilang ang suporta para sa mga dropdown).
.navbar-togglerpara gamitin sa aming collapse plugin at iba pang gawi sa pag- toggling ng nabigasyon .
.form-inlinepara sa anumang form na kontrol at pagkilos.
.navbar-textpara sa pagdaragdag ng patayong nakasentro na mga string ng teksto.
.collapse.navbar-collapsepara sa pagpapangkat at pagtatago ng mga nilalaman ng navbar sa pamamagitan ng isang breakpoint ng magulang.
Narito ang isang halimbawa ng lahat ng sub-components na kasama sa isang tumutugon na light-themed navbar na awtomatikong nag-collapse sa lg(malaking) breakpoint.
Ang halimbawang ito ay gumagamit ng kulay ( bg-light) at espasyo ( my-2, my-lg-0, mr-sm-0, my-sm-0) mga klase ng utility.
Tatak
Ang .navbar-brandmaaaring ilapat sa karamihan ng mga elemento, ngunit ang isang anchor ay pinakamahusay na gumagana dahil ang ilang mga elemento ay maaaring mangailangan ng mga klase ng utility o mga custom na istilo.
Ang pagdaragdag ng mga larawan sa .navbar-branday malamang na palaging mangangailangan ng mga custom na istilo o mga kagamitan sa tamang sukat. Narito ang ilang mga halimbawa upang ipakita.
Nav
Bumubuo ang mga link sa navigation ng Navbar sa aming .navmga opsyon gamit ang sarili nilang modifier class at nangangailangan ng paggamit ng mga toggler class para sa tamang tumutugon na istilo. Ang pag-navigate sa mga navbar ay lalago din upang sakupin ang mas maraming pahalang na espasyo hangga't maaari upang panatilihing ligtas na nakahanay ang iyong mga nilalaman ng navbar.
Ang mga aktibong estado—na may .active—upang ipahiwatig ang kasalukuyang pahina ay maaaring direktang ilapat sa .nav-links o sa kanilang agarang magulang .nav-item.
At dahil gumagamit kami ng mga klase para sa aming mga nav, maiiwasan mo nang buo ang diskarteng nakabatay sa listahan kung gusto mo.
Maaari mo ring gamitin ang mga dropdown sa iyong navbar nav. Ang mga dropdown na menu ay nangangailangan ng wrapping element para sa pagpoposisyon, kaya siguraduhing gumamit ng hiwalay at nested na elemento para sa .nav-itemat .nav-linktulad ng ipinapakita sa ibaba.
Mga porma
Maglagay ng iba't ibang mga kontrol sa form at mga bahagi sa loob ng isang navbar na may .form-inline.
Ang mga elemento ng agarang bata .navbaray gumagamit ng flex layout at magiging default sa justify-content: between. Gumamit ng mga karagdagang flex utilities kung kinakailangan upang ayusin ang gawi na ito.
Gumagana rin ang mga pangkat ng input:
Sinusuportahan din ang iba't ibang mga button bilang bahagi ng mga form na ito ng navbar. Isa rin itong magandang paalala na ang mga utility ng vertical alignment ay maaaring gamitin upang ihanay ang iba't ibang laki ng mga elemento.
Text
Ang mga Navbar ay maaaring maglaman ng mga piraso ng teksto sa tulong ng .navbar-text. Inaayos ng klase na ito ang vertical alignment at horizontal spacing para sa mga string ng text.
Paghaluin at pagtugmain ang iba pang mga bahagi at kagamitan kung kinakailangan.
Mga scheme ng kulay
Ang pag-theming sa navbar ay hindi kailanman naging mas madali salamat sa kumbinasyon ng mga klase sa pag-theming at mga background-colorutility. Pumili mula .navbar-lightsa para sa paggamit sa mga matingkad na kulay ng background, o .navbar-darkpara sa madilim na mga kulay ng background. Pagkatapos, i-customize gamit ang .bg-*mga utility.
Mga lalagyan
Bagama't hindi ito kinakailangan, maaari mong i-wrap ang isang navbar sa isang .containerupang igitna ito sa isang pahina o magdagdag ng isa sa loob upang isentro lamang ang mga nilalaman ng isang nakapirming o static na tuktok na navbar .
Kapag ang lalagyan ay nasa loob ng iyong navbar, ang pahalang na padding nito ay aalisin sa mga breakpoint na mas mababa kaysa sa iyong tinukoy na .navbar-expand{-sm|-md|-lg|-xl}klase. Tinitiyak nito na hindi kami nagdodoble sa padding nang hindi kinakailangan sa mas mababang viewport kapag na-collapse ang iyong navbar.
Paglalagay
Gamitin ang aming mga kagamitan sa posisyon upang ilagay ang mga navbar sa mga hindi static na posisyon. Pumili mula sa naayos hanggang sa itaas, naayos hanggang sa ibaba, o nakadikit sa itaas (nag-scroll gamit ang pahina hanggang sa maabot nito ang tuktok, pagkatapos ay mananatili doon). Ang mga nakapirming navbar ay gumagamit ng position: fixed, ibig sabihin ay nakuha ang mga ito mula sa normal na daloy ng DOM at maaaring mangailangan ng custom na CSS (hal., padding-topsa <body>) upang maiwasan ang pag-overlap sa iba pang mga elemento.
Maaaring gamitin ng mga Navbar ang .navbar-toggler, .navbar-collapse, at .navbar-expand{-sm|-md|-lg|-xl}mga klase upang magbago kapag nag-collapse ang kanilang nilalaman sa likod ng isang button. Sa kumbinasyon ng iba pang mga utility, madali mong mapipili kung kailan ipapakita o itatago ang mga partikular na elemento.
Para sa mga navbar na hindi kailanman bumagsak, idagdag ang .navbar-expandklase sa navbar. Para sa mga navbar na palaging nagko-collapse, huwag magdagdag ng anumang .navbar-expandklase.
Toggler
Ang mga toggler ng Navbar ay naka-left-align bilang default, ngunit kung susundin nila ang elementong magkakapatid tulad ng .navbar-brand, awtomatiko silang maili-align sa dulong kanan. Kapag binaligtad ang iyong markup, mababaligtad ang pagkakalagay ng toggler. Nasa ibaba ang mga halimbawa ng iba't ibang istilo ng toggle.
Nang walang .navbar-brandipinapakita sa pinakamababang breakpoint:
Sa isang pangalan ng tatak na ipinapakita sa kaliwa at toggler sa kanan:
May toggler sa kaliwa at brand name sa kanan:
Panlabas na nilalaman
Minsan gusto mong gamitin ang collapse plugin upang ma-trigger ang nakatagong content sa ibang lugar sa page. Dahil ang aming plugin ay gumagana sa idat data-targettumutugma, iyon ay madaling gawin!