Ibha ye-Navbar
Amadokhumenti nezibonelo zesihloko sokuzulazula esinamandla, esisabelayo se-Bootstrap, ibha ye-navbar. Kufaka usekelo lwebhrendi, ukuzulazula, nokunye okwengeziwe, okuhlanganisa usekelo lwe-plugin yethu yokugoqa.
Isebenza kanjani
Nakhu okudingeka ukwazi ngaphambi kokuthi uqale nge-navbar:
- Ama-Navbar adinga ukugoqwa ukuze aphendule ukugoqa
.navbar
namakilasi esikimu sombala ..navbar-expand{-sm|-md|-lg|-xl|-xxl}
- Ama-Navbar nokuqukethwe kwawo kuwuketshezi ngokuzenzakalelayo. Shintsha isiqukathi ukuze ukhawulele ububanzi bazo obuvundlile ngezindlela ezahlukene.
- Sebenzisa izikhala zethu kanye namakilasi ezinsiza eziguquguqukayo ukuze ulawule isikhala nokuqondanisa ngaphakathi kwama-navbar.
- Ama-Navbar aphendula ngokuzenzakalelayo, kodwa ungakwazi ukuwashintsha kalula ukuze ashintshe lokho. Ukuziphatha okusabelayo kuncike ku-plugin yethu ye-Collapse JavaScript.
- Qinisekisa ukufinyeleleka ngokusebenzisa i-
<nav>
elementi noma, uma usebenzisa i-elementi evamile njenge-<div>
, engeza i-role="navigation"
navbar ngayinye ukuze uyikhombe ngokusobala njengesifunda esiyingqopha-mlando kubasebenzisi bobuchwepheshe obusizayo. - Khomba into yamanje ngokusebenzisa
aria-current="page"
ikhasi lamanje nomaaria-current="true"
into yamanje ngesethi.
prefers-reduced-motion
embuzweni wemidiya. Bona ingxenye
yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .
Okuqukethwe okusekelwe
Ama-Navbar eza nosekelo olwakhelwe ngaphakathi lwezingxenye ezincane ezimbalwa. Khetha kokulandelayo njengoba kudingeka:
.navbar-brand
inkampani yakho, umkhiqizo, noma igama lephrojekthi..navbar-nav
ukuze uthole ukuzulazula okugcwele ubude nokungasindi (okuhlanganisa nosekelo lokwehliswayo)..navbar-toggler
ukuze sisetshenziswe ne-plugin yethu yokugoqa nokunye ukuziphatha kokuguqula indlela yokuzulazula.- Izinsiza ze-Flex nezikhala zanoma yiziphi izilawuli nezenzo zefomu.
.navbar-text
yokwengeza amayunithi ezinhlamvu aphakathi nendawo aqondile..collapse.navbar-collapse
ukuze uqoqe futhi ufihle okuqukethwe kwe-navbar ngephuzu lomzali.- Engeza ongakukhetha
.navbar-scroll
ukuze usethemax-height
futhi uskrole okuqukethwe kwe-navbar enwetshiwe .
Nasi isibonelo sazo zonke izingxenye ezingaphansi ezifakwe ku-navbar enetimu yokukhanya esabelayo egoqa ngokuzenzakalelayo endaweni lg
yokuphumula (enkulu).
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Lesi sibonelo sisebenzisa ingemuva ( bg-light
) kanye nesikhala ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
) amakilasi awusizo.
Ibhrendi
I- .navbar-brand
elekthronikhi ingasetshenziswa kuma-elementi amaningi, kodwa ihange lisebenza kahle kakhulu, njengoba ezinye izici zingase zidinge izigaba eziwusizo noma izitayela zangokwezifiso.
Umbhalo
Engeza umbhalo wakho ngaphakathi kwe-elementi .navbar-brand
neklasi.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
Isithombe
Ungakwazi esikhundleni sombhalo ongaphakathi kwefayela .navbar-brand
le- <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>
Isithombe nombhalo
Ungakwazi futhi ukusebenzisa ezinye izinsiza ezengeziwe ukwengeza isithombe nombhalo ngesikhathi esisodwa. Qaphela ukufakwa .d-inline-block
kanye .align-text-top
naku- <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
Nav
Izixhumanisi zokuzulazula ze-Navbar zakhela phezu .nav
kwezinketho zethu ngesigaba sazo sokuguqula futhi zidinga ukusetshenziswa kwamakilasi e-toggler ukuthola isitayela esifanele sokuphendula. Ukuzulazula kuma-navbar nakho kuzokhula kuthathe indawo evundlile ngangokunokwenzeka ukuze ugcine okuqukethwe kwakho kwe-navbar kuhambisana ngokuphephile.
Engeza .active
ikilasi .nav-link
ukuze ubonise ikhasi lamanje.
Sicela uqaphele ukuthi kufanele futhi wengeze aria-current
isibaluli kokusebenzayo .nav-link
.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Futhi ngenxa yokuthi sisebenzisa amakilasi kuma-navs ethu, ungagwema indlela esuselwe ohlwini ngokuphelele uma uthanda.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
</div>
</nav>
Ungasebenzisa futhi okwehliswayo ku-navbar yakho. Amamenyu okudonsela phansi adinga into yokugoqa ukuze ibekwe, ngakho-ke qiniseka ukuthi usebenzisa izinto ezihlukene nezibekwe esidlekeni .nav-item
futhi .nav-link
njengoba kukhonjisiwe ngezansi.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Amafomu
Beka izilawuli zamafomu ahlukahlukene kanye nezingxenye ngaphakathi kwe-navbar:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Izinto ezisheshayo zezingane .navbar
zokusetshenziswa kwesakhiwo esiguqukayo futhi zizozenzakalelayo zibe justify-content: space-between
. Sebenzisa izinsiza ezengeziwe eziguquguqukayo njengoba kudingeka ukuze ulungise lokhu kuziphatha.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Amaqembu okokufaka ayasebenza, nawo. Uma i-navbar yakho iyifomu lonke, noma ngokuvamile iyifomu, ungasebenzisa <form>
isici njengesiqukathi futhi ulondoloze i-HTML ethile.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
Izinkinobho ezahlukahlukene zisekelwa njengengxenye yalawa mafomu e-navbar, nawo. Lesi futhi isikhumbuzo esihle sokuthi izinsiza zokuqondanisa okume mpo zingasetshenziswa ukuqondisa izinto ezinosayizi abahlukahlukene.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
Umbhalo
Ama-Navbar angase aqukathe izingcezu zombhalo ngosizo lwe- .navbar-text
. Leli klasi lilungisa ukuqondanisa okume mpo kanye nesikhala esivundlile seyunithi yezinhlamvu zombhalo.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Hlanganisa futhi uhlanganise nezinye izingxenye kanye nezinsiza njengoba kudingeka.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>
Izikimu zombala
Ukwenza i-navbar akukaze kube lula ngenxa yenhlanganisela yamakilasi etimu background-color
nezinsiza. Khetha kuzo .navbar-light
ukuze usebenzise ngemibala engemuva ekhanyayo, noma .navbar-dark
ngemibala engemuva emnyama. Bese, yenza ngendlela oyifisayo .bg-*
nezinsiza.
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
Izitsha
Nakuba kungadingeki, ungakwazi ukugoqa ibha yokuzulazula .container
ukuze uyibeke maphakathi nekhasi–yize qaphela ukuthi isiqukathi sangaphakathi sisadingeka. Noma ungangeza isitsha ngaphakathi .navbar
ukuze ubeke phakathi kuphela okuqukethwe kwe- navbar engashintshi noma emile .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
Sebenzisa noma yiziphi iziqukathi eziphendulayo ukuze uguqule ukuthi okuqukethwe ku-navbar yakho kuvezwa kangakanani.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Ukubekwa
Sebenzisa izinsiza zethu zesikhundla ukuze ubeke ama-navbar ezindaweni ezingezona ezimile. Khetha kusukela kokugxilile kuye phezulu, okugxilile kuye phansi, noma kunamathele phezulu (skrola ngekhasi lize lifike phezulu, bese lihlala lapho). Ama-navbar angashintshi asebenzisa position: fixed
, okusho ukuthi adonswa ekugelezeni okuvamile kwe-DOM futhi angase adinge i-CSS yangokwezifiso (isb., padding-top
ku- <body>
) ukuze kuvinjelwe ukugqagqana nezinye izici.
Futhi qaphela ukuthi .sticky-top
isebenzisa position: sticky
, okungasekelwe ngokugcwele kuso sonke isiphequluli .
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
Ukuskrola
Engeza .navbar-nav-scroll
ku- .navbar-nav
(noma enye ingxenye encane ye-navbar) ukuze unike amandla ukuskrola okuqondile ngaphakathi kokuqukethwe okuguqulwayo kwe-navbar egoqiwe. Ngokuzenzakalelayo, ukuskrola kungena 75vh
(noma ku-75% wobude bembobo yokubuka), kodwa ungakwazi ukukukhipha lokho ngempahla yangokwezifiso ye-CSS yasendaweni --bs-navbar-height
noma izitayela zangokwezifiso. Ezikhumulweni zokubuka ezinkulu lapho ibha ye-navbar inwetshwa, okuqukethwe kuzovela njengoba kwenzeka ku-navbar ezenzakalelayo.
Sicela uqaphele ukuthi lokhu kuziphatha kuza nesiphambeko esingase sibe khona— overflow
lapho kulungiselelwa overflow-y: auto
(okudingekile ukuskrola okuqukethwe lapha), overflow-x
kulingana auto
nokuthi , okuzonqampuna okunye okuqukethwe okuvundlile.
Nasi isibonelo se-navbar esisebenzisa .navbar-nav-scroll
ne- style="--bs-scroll-height: 100px;"
, nezinye izinsiza ze-margin eyengeziwe ukuze uthole isikhala esiphezulu.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Ukuziphatha okusabelayo
Ama-Navbar angasebenzisa .navbar-toggler
, .navbar-collapse
, kanye .navbar-expand{-sm|-md|-lg|-xl|-xxl}
namakilasi ukuze anqume lapho okuqukethwe kwawo kugoqeka ngemva kwenkinobho. Ngokuhambisana nezinye izinsiza, ungakhetha kalula ukuthi uzibonisa nini noma uzifihle nini izinto ezithile.
Kuma-navbar angawi, engeza .navbar-expand
iklasi ku-navbar. Kuma-navbar ahlala egoqa, ungangezi noma yisiphi .navbar-expand
isigaba.
I-Toggler
Iziguquli zebha ye-Navbar ziqondaniswe kwesokunxele ngokuzenzakalelayo, kodwa uma zilandela i-elementi eyizelamani njenge- , zizoqondaniswa .navbar-brand
ngokuzenzakalelayo kwesokudla. Ukubuyisela emuva imakhaphu yakho kuzohlehlisa ukubekwa kwesiguquli. Ngezansi kunezibonelo zezitayela ezahlukene zokuguqula.
Ngaphandle .navbar-brand
kokuboniswa endaweni encane yokuphumula:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Ngegama lomkhiqizo eliboniswa kwesokunxele kanye ne-toggler kwesokudla:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Nge-toggler kwesokunxele kanye negama lomkhiqizo kwesokudla:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Okuqukethwe kwangaphandle
Kwesinye isikhathi ufuna ukusebenzisa i-plugin yokugoqa ukuze uqalise isici sesiqukathi sokuqukethwe okuhlala ngaphandle kwe- .navbar
. Ngoba i-plugin yethu isebenza ekufaniseni id
nasekufaniseni data-bs-target
, lokho kwenziwa kalula!
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
Uma wenza lokhu, sincoma ukuthi ufake i-JavaScript eyengeziwe ukuze uhambise ukugxila ngokohlelo kusiqukathi uma sivulwa. Uma kungenjalo, abasebenzisi bekhibhodi nabasebenzisi bobuchwepheshe obusizayo bazoba nobunzima bokuthola okuqukethwe okusha okuveziwe - ikakhulukazi uma isiqukathi esivuliwe siza ngaphambi komguquli esakhiweni sedokhumenti. Futhi sincoma ukuthi wenze isiqiniseko sokuthi isiguquli sinesibaluli aria-controls
, esikhomba id
esiqukathi sokuqukethwe. Ngokombono, lokhu kuvumela abasebenzisi bobuchwepheshe obusizayo ukuthi bagxume ngokuqondile ukusuka kusiguquli baye esitsheni esisilawulayo–kodwa usekelo lwalokhu okwamanje alunalutho.
I-offcanvas
Guqula i-navbar yakho enwebekayo negoqiwe ibe idrowa le-offcanvas eline-plugin ye-offcanvas. Sinweba zombili izitayela ezizenzakalelayo ze-offcanvas futhi sisebenzisa .navbar-expand-*
amakilasi ethu ukuze sakhe ibha eseceleni eguqukayo neguquguqukayo.
Esibonelweni esingezansi, ukuze udale i-offcanvas navbar ehlala igoqiwe kuwo wonke ama-breakpoint, yeka .navbar-expand-*
ikilasi ngokuphelele.
<nav class="navbar navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
Ukudala i-offcanvas navbar enwebeka ibe yi-navbar evamile endaweni ethile yokuphumula efana lg
, sebenzisa .navbar-expand-lg
.
<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
...
</div>
</nav>
Sass
Okuguquguqukayo
$navbar-padding-y: $spacer * .5;
$navbar-padding-x: null;
$navbar-nav-link-padding-x: .5rem;
$navbar-brand-font-size: $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end: 1rem;
$navbar-toggler-padding-y: .25rem;
$navbar-toggler-padding-x: .75rem;
$navbar-toggler-font-size: $font-size-lg;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-toggler-focus-width: $btn-focus-width;
$navbar-toggler-transition: box-shadow .15s ease-in-out;
$navbar-dark-color: rgba($white, .55);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, .25);
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color: rgba($white, .1);
$navbar-light-color: rgba($black, .55);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
$navbar-light-disabled-color: rgba($black, .3);
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;
$navbar-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
Iluphu
Ibha ye- navbar ephendulayo izigaba zokunweba/zokugoqa (isb, .navbar-expand-lg
) zihlanganiswa $breakpoints
nemephu futhi zenziwa nge-loop ku- scss/_navbar.scss
.
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x;
}
}
.navbar-nav-scroll {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
.offcanvas-header {
display: none;
}
.offcanvas {
position: inherit;
bottom: 0;
z-index: 1000;
flex-grow: 1;
visibility: visible !important; // stylelint-disable-line declaration-no-important
background-color: transparent;
border-right: 0;
border-left: 0;
@include transition(none);
transform: none;
}
.offcanvas-top,
.offcanvas-bottom {
height: auto;
border-top: 0;
border-bottom: 0;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
}
}
}
}