Navbar fɔ di wan dɛn we de
Dokumɛnt ɛn ɛgzampul fɔ Bootstrap in pawaful, rispɔnsiv nevigishɔn hεda, di navbar. Inklud sɔpɔt fɔ branding, nevigishɔn, ɛn ɔda tin dɛn, inklud sɔpɔt fɔ wi kollaps plɔgin.
Aw i de wok
Na dis na wetin yu nid fɔ no bifo yu bigin wit di navbar:
- Navbars nid wan wrapping
.navbar
wit.navbar-expand{-sm|-md|-lg|-xl|-xxl}
fɔ rispɔnsiv kollaps ɛn kala skim klas dɛn. - Navbars ɛn dɛn kɔntinyu na fluid bay difɔlt. Chenj di kɔntena fɔ stɔp dɛn ɔrizɔntal wit difrɛn we dɛn.
- Yuz wi spays ɛn fleks yutiliti klas fɔ kɔntrol spɛshal ɛn alaynɛshɔn insay navbar dɛn.
- Navbar dɛn kin ansa bay difɔlt, bɔt yu kin izi fɔ chenj dɛn fɔ chenj dat. Rispɔnsiv bihayvya dipen pan wi Kɔlaps JavaSkript plɔgin.
- Mek shɔ se yu gɛt akses bay we yu yuz wan
<nav>
ɛlimɛnt ɔ, if yu de yuz wan mɔ jenɛrik ɛlimɛnt lɛk a<div>
, ad arole="navigation"
to ɛvri navbar fɔ mek yu no klia wan se na landmak rijyɔn fɔ di wan dɛn we de yuz ɛp tɛnkɔlɔji dɛn. - Sho di tin we yu de yuz naw bay we yu yuz
aria-current="page"
fɔ di pej we de naw ɔaria-current="true"
fɔ di tin we yu de yuz naw na wan sɛt.
prefers-reduced-motion
midia kwɛstyɔn. Si di
ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .
Kɔntinyu dɛn we dɛn sɔpɔt
Navbars kam wit bilt-in sɔpɔt fɔ wan anful sab-kɔmpɔnɛnt dɛn. Pik frɔm dɛn wan ya as nid de:
.navbar-brand
fɔ yu kɔmni, prɔdak, ɔ prɔjek nem..navbar-nav
fɔ wan ful-ayt ɛn laytwɛt nevigishɔn (inklud sɔpɔt fɔ drɔpdɔwn dɛn)..navbar-toggler
fɔ yuz wit wi kollaps plɔgin ɛn ɔda nevigishɔn tɔglin bihayvya dɛn.- Fleks ɛn spɛshal yutiliti fɔ ɛni fɔm kɔntrol ɛn akshɔn dɛn.
.navbar-text
fɔ ad string dɛn we gɛt tɛks we gɛt vertikal sɛnt..collapse.navbar-collapse
fɔ grup ɛn ayd navbar kɔntinyu bay wan mama ɛn papa brekpɔynt.- Ad wan opshɔnal
.navbar-scroll
fɔ sɛt wanmax-height
ɛn skrol ɛkspanda navbar kɔntinyu .
Na dis na wan ɛgzampul fɔ ɔl di sab-kɔmpɔnɛnt dɛn we de insay wan rispɔnsiv layt-tim navbar we de kɔlaps ɔtomɛtik wan na di lg
(big) brekpɔynt.
<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>
Dis ɛgzampul de yuz bakgrɔn ( bg-light
) ɛn spɛshal ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
) yutiliti klas dɛn.
Mak
Di .navbar-brand
kin aplay to bɔku ɛlimɛnt dɛn, bɔt wan ankɔ de wok fayn, as sɔm ɛlimɛnt dɛn kin nid yutiliti klas ɔ kɔstɔm stayl dɛn.
Tɛks
Ad yu tɛks insay wan ɛlimɛnt wit di .navbar-brand
klas.
<!-- 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>
Aydul
Yu kin chenj di tɛks we de insay di buk .navbar-brand
wit wan <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>
Imej ɛn tɛks
Yu kin yuz sɔm ɔda tin dɛn bak fɔ ad pikchɔ ɛn tɛks di sem tɛm. Notis di ad we dɛn ad .d-inline-block
ɛn .align-text-top
pan di <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
Navbar nevigishɔn link dɛn bil pan wi .nav
opshɔn dɛn wit dɛn yon modifya klas ɛn dɛn nid fɔ yuz toggler klas dɛn fɔ mek dɛn stayl di rayt we fɔ ansa. Nevigishɔn insay navbar dɛn go gro bak fɔ tek bɔku ɔrizɔntal spɛs as pɔsibul fɔ kip yu navbar kɔntinyu dɛn alaynɛd fayn fayn wan.
Ad di .active
klas pan .nav-link
fɔ sho di pej we de naw.
Duya mɛmba se yu fɔ ad di aria-current
atribyut bak na di aktif .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>
Ɛn bikɔs wi de yuz klas fɔ wi nav dɛn, yu kin avɔyd di list-based aprɔch ɔltogɛda if yu want.
<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>
Yu kin yuz drɔpdɔwn dɛn bak na yu navbar. Drɔpdɔwn mɛnyu dɛn nid fɔ rap ɛlimɛnt fɔ posishun, so mek shɔ se yu yuz sɛpret ɛn nɛst ɛlimɛnt dɛn fɔ .nav-item
ɛn .nav-link
lɛk aw dɛn sho dɔŋ ya.
<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>
Fɔm dɛn
Put difrɛn fɔm kɔntrol ɛn kɔmpɔnɛnt dɛn insay wan 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>
Wantɛm pikin ɛlimɛnt dɛn fɔ .navbar
yuz fleks layout ɛn go difɔlt to justify-content: space-between
. Yuz ɔda fleks yutiliti dɛn as nid de fɔ ajɔst dis bihayvya.
<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>
Input grup dɛn de wok, dɛnsɛf. If yu navbar na wan ol fɔm, ɔ mɔs na fɔm, yu kin yuz di <form>
ɛlimɛnt as di kɔntena ɛn sev sɔm HTML.
<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>
Difrɛn bɔtin dɛn de sɔpɔt as pat pan dɛn navbar fɔm dɛn ya, bak. Dis na big mɛmba bak se dɛn kin yuz vertikal alaynɛshɔn yutiliti fɔ alaynɛd difrɛn saiz ɛlimɛnt dɛn.
<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>
Tɛks
Navbar dɛn kin gɛt bit dɛn fɔ tɛks wit di ɛp we .navbar-text
. Dis klas de ajɔst vertikal alaynɛshɔn ɛn ɔrizɔntal spɛshal fɔ string dɛn na tɛks.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Miks ɛn mach wit ɔda kɔmpɔnɛnt ɛn yutiliti dɛn as nid de.
<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>
Kɔlɔ skim dɛn
Tim di navbar nɔ ɛva izi tank to di kɔmbaynshɔn fɔ tim klas ɛn background-color
yutiliti. Pik frɔm .navbar-light
fɔ yuz wit layt bakgrɔn kɔlɔ dɛn, ɔ .navbar-dark
fɔ dak bakgrɔn kɔlɔ dɛn. Dɔn, kɔstɔmayt wit .bg-*
yutiliti dɛn.
<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>
Kɔntena dɛn
Pan ɔl we i nɔ nid, yu kin rap wan navbar insay a .container
fɔ sɛnt am na wan pej–pan ɔl we notis se dɛn stil nid fɔ gɛt kɔntena we de insay. Ɔ yu kin ad kɔntena insay di .navbar
fɔ jɔs sɛnt di tin dɛn we de insay wan fiks ɔ statik tɔp navbar .
<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>
Yuz ɛni wan pan di kɔntena dɛn we de ansa fɔ chenj aw dɛn de sho di tin dɛn we de insay yu navbar.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Di ples we dɛn fɔ put am
Yuz wi pozishɔn yutiliti fɔ put navbar dɛn na nɔ-statik pozishɔn dɛn. Pik frɔm fiks to di ɔp, fiks to di bɔt, ɔ stik to di ɔp (skrol wit di pej te i rich ɔp, dɔn i de de). Fiks navbar dɛn de yuz position: fixed
, we min se dɛn pul dɛn frɔm di nɔmal flɔ na di DOM ɛn dɛn kin nid kɔstɔm CSS (ɛgz., padding-top
na di <body>
) fɔ mek dɛn nɔ ɔvalap wit ɔda ɛlimɛnt dɛn.
Notis bak se .sticky-top
yuz position: sticky
, we nɔ fulɔp fɔ sɔpɔt na ɛvri brawza .
<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>
We yu de skrol
Ad .navbar-nav-scroll
to wan .navbar-nav
(ɔ ɔda navbar sab-kɔmpɔnɛnt) fɔ mek yu ebul fɔ skrol vertikal insay di tin dɛn we yu kin tɔgl na wan navbar we dɔn kol. Bay difɔlt, skrol de kik in na 75vh
(ɔ 75% pan di viupɔt ayt), bɔt yu kin ɔvalayz dat wit di lokal CSS kɔstɔm prɔpati --bs-navbar-height
ɔ kɔstɔm stayl dɛn. Na big viupɔt dɛn we dɛn dɔn ɛkspɛn di navba, di tin dɛn we de insay go apia lɛk aw i de apin na difɔlt navba.
Duya mɛmba se dis bihayvya kam wit wan pɔtɛnɛshɛl drawback fɔ overflow
—we sɛtin overflow-y: auto
(we nid fɔ skrol di kɔntinyu ya), overflow-x
na di ikwal to auto
, we go krop sɔm ɔrizɔntal kɔntinyu.
Na wan ɛgzampul navbar we de yuz .navbar-nav-scroll
wit style="--bs-scroll-height: 100px;"
, wit sɔm ɛkstra margin yutiliti fɔ optimum spays.
<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>
Di we aw pipul dɛn de biev we dɛn de ansa
Navbar dɛn kin yuz .navbar-toggler
, .navbar-collapse
, ɛn .navbar-expand{-sm|-md|-lg|-xl|-xxl}
klas dɛn fɔ no ustɛm dɛn kɔntinyu fɔ kol biɛn wan bɔtin. We yu jɔyn wit ɔda yutiliti dɛn, yu kin pik izi wan ustɛm fɔ sho ɔ ayd patikyula tin dɛn.
Fɔ navbar dɛn we nɔ de ɛva kɔlap, ad di .navbar-expand
klas na di navbar. Fɔ navbar dɛn we kin ɔltɛm kol, nɔ ad ɛni .navbar-expand
klas.
Toggler fɔ di wan dɛn we de chenj
Navbar togglers na lef-alayn bay difɔlt, bɔt if dɛn fala wan brɔda ɛn sista ɛlimɛnt lɛk wan .navbar-brand
, dɛn go ɔtomɛtik alaynɛd to di fa rayt. We yu rivɛns yu mak, i go rivɛns di ples we dɛn put di tɔgl. Dis dɔŋ ya na ɛgzampul dɛn bɔt difrɛn stayl dɛn we dɛn kin yuz fɔ tɔgl.
Wit no .navbar-brand
sho na di smol brekpoint:
<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>
Wit wan brand nem we dɛn sho na di lɛft ɛn toggler na di rayt say:
<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>
Wit wan toggler na di lef ɛn brand nem na di rayt:
<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>
Di tin dɛn we de na do
Sɔntɛnde yu want fɔ yuz di kɔlapshɔn plɔgin fɔ trig wan kɔntena ɛlimɛnt fɔ kɔntinyu we strɔkchɔral wan sidɔm ausayd di .navbar
. Bikɔs wi plɔgin de wok pan di id
ɛn data-bs-target
maching, dat kin izi fɔ du!
<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>
We yu du dis, wi kin advays yu fɔ put ɔda JavaSkript fɔ muv di fɔs programmatik wan to di kɔntena we dɛn opin am. If nɔto dat, di wan dɛn we de yuz kibɔd ɛn di wan dɛn we de yuz ɛp tɛnknɔlɔji dɛn go mɔs gɛt prɔblɛm fɔ fɛn di nyu tin dɛn we dɛn dɔn sho - mɔ if di kɔntena we dɛn bin opin kam bifo di tɔgl na di dɔkyumɛnt in strɔkchɔ. Wi kin advays bak fɔ mek shɔ se di tɔgl gɛt di aria-controls
atribyut, we de pɔynt to di id
ɔf di kɔntinyu kɔntena. In tiori, dis de alaw di wan dɛn we de yuz di ɛp tɛknɔlɔji fɔ jomp dairekt frɔm di tɔglɔr to di kɔntena we i de kɔntrol–bɔt sɔpɔt fɔ dis naw rili patchy.
Ɔfkanvas
Transfɔm yu navbar we de ɛkspɛn ɛn we de kol to wan ɔfkanvas drɔwa wit di ɔfkanvas plɔgin. Wi de ɛkstɛnd ɔl tu di ɔfkanvas difɔlt stayl dɛn ɛn yuz wi .navbar-expand-*
klas dɛn fɔ mek wan dinamik ɛn fleksibul nevigishɔn saydba.
Insay di ɛgzampul we de dɔŋ ya, fɔ mek wan ɔfkanvas navbar we kin ɔltɛm kɔlap akɔdin to ɔl di brekpɔynt dɛn, pul di .navbar-expand-*
klas ɔltogɛda.
<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>
Fɔ mek wan ɔfkanvas navbar we de ɛkspɛn to wan nɔmal navbar na wan patikyula brekpɔynt lɛk lg
, yuz .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 we bin de
Di tin dɛn we kin chenj
$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;
Tay
Rispɔnsiv navbar ɛkspɛn/kɔlaps klas dɛn (ɛgz., .navbar-expand-lg
) dɛn jɔyn wit di $breakpoints
map ɛn dɛn de jenarayz dɛn tru wan lɔp insay 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;
}
}
}
}
}