Navbar
Inyandiko n'ingero kuri Bootstrap ikomeye, yitabira kugendana umutwe, navbar. Harimo inkunga yo kuranga, kugendana, nibindi byinshi, harimo inkunga yo gusenyuka kwa plugin.
Uburyo ikora
Dore ibyo ugomba kumenya mbere yo gutangira na navbar:
- Navbars isaba gupfunyika
.navbar
hamwe.navbar-expand{-sm|-md|-lg|-xl|-xxl}
no gusenyuka kwishura hamwe namasomo yamabara . - Navbars nibiyirimo biratemba muburyo busanzwe. Hindura kontineri kugirango ugabanye ubugari bwa horizontal muburyo butandukanye.
- Koresha intera yacu na flex yingirakamaro kumasomo yo kugenzura intera no guhuza muri navbars.
- Navbars irasubiza muburyo budasanzwe, ariko urashobora kuyihindura byoroshye kugirango uhindure ibyo. Imyitwarire isubiza biterwa no gusenyuka kwa JavaScript plugin.
- Menya neza
<nav>
niba ukoresheje ikintu cyangwa, niba ukoresheje ibintu rusange nka a<div>
, ongerahorole="navigation"
kuri buri navbar kugirango ubigaragaze neza nkakarere kihariye kubakoresha ikoranabuhanga rifasha. - Erekana ikintu kiriho ukoresheje
aria-current="page"
kurupapuro rwubu cyangwaaria-current="true"
kubintu biriho murutonde.
prefers-reduced-motion
nibibazo byitangazamakuru. Reba igice
cyagabanijwe cyicyiciro cyibisobanuro byacu .
Ibishyigikiwe
Navbars izanye nubushakashatsi bwubatswe kubice bike. Hitamo muri ibi bikurikira nkuko bikenewe:
.navbar-brand
kuri sosiyete yawe, ibicuruzwa, cyangwa izina ryumushinga..navbar-nav
kuburebure bwuzuye nuburemere bworoshye (harimo inkunga yo kumanuka)..navbar-toggler
kugirango ukoreshe hamwe no gusenyuka kwa plugin hamwe nizindi nzira zo kugendana imyitwarire.- Ibikoresho byoroshye kandi bitandukanya uburyo ubwo aribwo bwose bugenzura n'ibikorwa.
.navbar-text
yo kongeramo uhagaritse imirongo yinyandiko..collapse.navbar-collapse
yo guteranya no guhisha ibiri muri navbar kubabyeyi.- Ongeraho
.navbar-scroll
uburyo bwo gushiraho amax-height
no kuzenguruka kwagura ibiri muri navbar .
Dore urugero rwibice byose bigize ibice byashizwemo urumuri-rufite insanganyamatsiko ya navbar ihita isenyuka kuri lg
(nini).
<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" href="#" tabindex="-1" aria-disabled="true">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>
Uru rugero rukoresha background ( bg-light
) hamwe nintera (,,, ) my-2
ibyiciro my-lg-0
byingirakamaro .me-sm-0
my-sm-0
Ikirango
Irashobora .navbar-brand
gukoreshwa mubintu byinshi, ariko inanga ikora neza, nkibintu bimwe bishobora gusaba amasomo yingirakamaro cyangwa uburyo bwihariye.
Inyandiko
Ongeraho inyandiko yawe mubintu hamwe .navbar-brand
nishuri.
<!-- 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>
Ishusho
Urashobora gusimbuza inyandiko muri i .navbar-brand
hamwe na <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>
Ishusho ninyandiko
Urashobora kandi gukoresha ibikoresho bimwe byinyongera kugirango wongere ishusho ninyandiko icyarimwe. Reba inyongera ya .d-inline-block
no .align-text-top
kuri <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
Nav
Navbar yoguhuza imiyoboro yubaka kumahitamo yacu .nav
hamwe nicyiciro cyabo cyo guhindura kandi bisaba gukoresha ibyiciro bya toggler kugirango bibe byiza. Kugenda muri navbars nabyo bizakura kugirango bifate umwanya munini utambitse kugirango bishoboke kugirango ibikubiyemo byawe bihuze neza.
Ongeraho .active
ishuri .nav-link
kugirango werekane urupapuro rwubu.
Nyamuneka menya ko ugomba no kongeramo aria-current
ikiranga kubikorwa .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Kandi kubera ko dukoresha amasomo kuri navs zacu, urashobora kwirinda uburyo bushingiye kurutonde rwose niba ubishaka.
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
Urashobora kandi gukoresha ibitonyanga muri navbar yawe. Ibitonyanga bitonyanga bisaba ikintu cyo gupfunyika kugirango uhagarare, bityo rero menya neza ko ukoresha ibintu bitandukanye kandi byashyizwe .nav-item
hamwe kandi .nav-link
nkuko bigaragara hano hepfo.
<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>
Ifishi
Shira uburyo butandukanye bwo kugenzura n'ibigize muri 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>
Ako kanya abana ibintu byo .navbar
gukoresha flex imiterere kandi bizahinduka kuri justify-content: space-between
. Koresha inyongera za flex zikenewe nkuko bikenewe kugirango uhindure iyi myitwarire.
<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>
Amatsinda yinjiza akora, nayo. Niba navbar yawe ari form yose, cyangwa ahanini ifishi, urashobora gukoresha <form>
element nka kontineri hanyuma ukabika HTML zimwe.
<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>
Utubuto dutandukanye dushyigikiwe nkigice cyiyi form ya navbar, nayo. Ibi kandi nibutsa cyane ko vertical alignement utilities ishobora gukoreshwa muguhuza ibintu bitandukanye.
<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>
Inyandiko
Navbars irashobora kuba irimo bits yinyandiko ifashijwe na .navbar-text
. Iri shuri rihindura vertical vertical na horizontal intera kumirongo yinyandiko.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Kuvanga no guhuza nibindi bice nibikoresho bikenewe.
<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>
Ibara
Gushushanya navbar ntabwo byigeze byoroha kuberako guhuza amasomo yibanze hamwe background-color
nibikorwa. Hitamo kuva .navbar-light
kugirango ukoreshe hamwe n'amabara yoroheje, cyangwa .navbar-dark
kumabara yijimye. Noneho, kora hamwe .bg-*
nibikorwa byingirakamaro.
<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>
Ibikoresho
Nubwo bidasabwa, urashobora kuzinga navbar muri a .container
kugirango uyishyire kurupapuro - nubwo menya ko ikintu cyimbere gisabwa. Cyangwa urashobora kongeramo kontineri imbere .navbar
kugirango ugere hagati gusa ibiri murwego ruhamye cyangwa ruhagaze neza .
<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>
Koresha ikintu icyo ari cyo cyose cyakiriwe kugirango uhindure uburyo bugari muri navbar yawe yerekanwe.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Gushyira
Koresha imyanya yacu yibikorwa kugirango ushire navbars mumwanya udahagaze. Hitamo kuva ushyizwe hejuru, ushyizwe hepfo, cyangwa wiziritse hejuru (umuzingo hamwe nurupapuro kugeza ugeze hejuru, hanyuma ugumeyo). Imiyoboro ihamye ikoreshwa position: fixed
, bivuze ko yakuwe mubintu bisanzwe bya DOM kandi birashobora gusaba CSS yihariye (urugero, padding-top
kuri <body>
) kugirango wirinde guhuzagurika nibindi bintu.
Menya kandi ko .sticky-top
ikoresha position: sticky
, idashyigikiwe byuzuye muri buri mushakisha .
<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>
Kuzunguruka
Ongeraho .navbar-nav-scroll
kuri .navbar-nav
(cyangwa izindi navbar sub-component) kugirango ushoboze guhindagurika muburyo buhindagurika bwibintu byavunitse. Mburabuzi, kuzunguruka biratera kuri 75vh
(cyangwa 75% yuburebure bwo kureba), ariko urashobora kurenga ibyo hamwe numutungo wa CSS wibanze --bs-navbar-height
cyangwa imiterere yihariye. Kubireba binini iyo navbar yaguwe, ibirimo bizagaragara nkuko bigenda muburyo busanzwe.
Nyamuneka menya ko iyi myitwarire ije ifite ingaruka zishobora kubaho - mugihe overflow
igenamigambi overflow-y: auto
(risabwa kuzunguruka ibirimo hano), overflow-x
ni kimwe na auto
, kizatanga umusaruro utambitse.
Dore urugero navbar ukoresheje .navbar-nav-scroll
hamwe style="--bs-scroll-height: 100px;"
, hamwe na margin yinyongera yingirakamaro kumwanya mwiza.
<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" href="#" tabindex="-1" aria-disabled="true">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>
Imyitwarire isubiza
Navbars irashobora gukoresha .navbar-toggler
, .navbar-collapse
hamwe .navbar-expand{-sm|-md|-lg|-xl|-xxl}
namasomo kugirango umenye igihe ibirimo bisenyutse inyuma ya buto. Ufatanije nibindi bikoresho, urashobora guhitamo byoroshye igihe cyo kwerekana cyangwa guhisha ibintu runaka.
Kuri navbars itigera isenyuka, ongeramo urwego .navbar-expand
kuri navbar. Kuri navbars ihora isenyuka, ntukongere urwego urwo arirwo rwose .navbar-expand
.
Toggler
Navbar togglers isigaye-ihujwe nibisanzwe, ariko nibakurikiza ikintu kivukana nka a .navbar-brand
, bazahita bahuza iburyo. Guhindura ibimenyetso byawe bizahindura ishyirwa rya toggler. Hano hariburorero bwuburyo butandukanye bwo guhinduranya.
Hamwe ntagaragajwe .navbar-brand
kumurongo muto:
<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" href="#" tabindex="-1" aria-disabled="true">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>
Hamwe nizina ryirango ryerekanwe ibumoso na toggler iburyo:
<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" href="#" tabindex="-1" aria-disabled="true">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>
Hamwe na toggler ibumoso nizina ryikirango iburyo:
<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" href="#" tabindex="-1" aria-disabled="true">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>
Ibiri hanze
Rimwe na rimwe, ushaka gukoresha plugin yo gusenyuka kugirango utere ikintu cya kontineri kubintu byicaye hanze ya .navbar
. Kuberako plugin yacu ikora kuri id
no data-bs-target
guhuza, ibyo biroroshye gukorwa!
<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>
Mugihe ukoze ibi, turasaba gushyiramo JavaScript yinyongera kugirango wimure icyerekezo kuri programme kuri kontineri iyo ifunguye. Bitabaye ibyo, abakoresha clavier hamwe n’abakoresha tekinoroji ifasha birashoboka ko bazagira ikibazo cyo kubona ibintu bishya byagaragaye - cyane cyane niba kontineri yafunguwe ije mbere yo guhindagura imiterere yinyandiko. Turasaba kandi kwemeza neza ko uwahinduye afite aria-controls
ikiranga, yerekana id
ibikubiye muri kontineri. Mubyigisho, ibi bituma abakoresha ikorana buhanga basimbuka biturutse kuri toggler berekeza kuri kontineri igenzura - ariko inkunga kuri ibi iroroshye.
Sass
Ibihinduka
$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;
Umuzingi
Navbar yitabira kwagura / gusenyuka ibyiciro (urugero, .navbar-expand-lg
) byahujwe $breakpoints
nikarita kandi byakozwe binyuze mumuzinga 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;
}
}
}
}
}