Navbar
Dokumentasie en voorbeelde vir Bootstrap se kragtige, responsiewe navigasie-opskrif, die navigasiebalk. Sluit ondersteuning vir handelsmerke, navigasie en meer in, insluitend ondersteuning vir ons ineenvou-inprop.
Hoe dit werk
Hier is wat jy moet weet voordat jy met die navigasiebalk begin:
- Navbars vereis 'n wikkel
.navbar
met.navbar-expand{-sm|-md|-lg|-xl|-xxl}
vir responsiewe ineenstorting en kleurskemaklasse . - Navbars en hul inhoud is by verstek vloeibaar. Verander die houer om hul horisontale breedte op verskillende maniere te beperk.
- Gebruik ons spasiëring- en buignutsklasse om spasiëring en belyning binne navigasiebalke te beheer.
- Navbars reageer by verstek, maar jy kan dit maklik verander om dit te verander. Responsiewe gedrag hang af van ons Collapse JavaScript-inprop.
- Verseker toeganklikheid deur 'n
<nav>
element te gebruik of, indien 'n meer generiese element soos 'n<div>
gebruik word, voeg 'nrole="navigation"
by elke navigasiebalk om dit uitdruklik as 'n landmerkstreek vir gebruikers van ondersteunende tegnologieë te identifiseer. - Dui die huidige item aan deur
aria-current="page"
vir die huidige bladsy ofaria-current="true"
vir die huidige item in 'n stel te gebruik.
prefers-reduced-motion
medianavraag. Sien die
verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .
Ondersteunde inhoud
Navbars kom met ingeboude ondersteuning vir 'n handvol sub-komponente. Kies uit die volgende soos nodig:
.navbar-brand
vir jou maatskappy-, produk- of projeknaam..navbar-nav
vir 'n volle hoogte en liggewig navigasie (insluitend ondersteuning vir dropdowns)..navbar-toggler
vir gebruik met ons invou-inprop en ander navigasiewisselgedrag .- Buig en spasiëring nutsprogramme vir enige vorm kontroles en aksies.
.navbar-text
vir die byvoeging van vertikaal gesentreerde stringe teks..collapse.navbar-collapse
vir die groepering en verberging van navigasiebalk-inhoud deur 'n ouer-breekpunt.- Voeg 'n opsioneel
.navbar-scroll
by om 'n uitgebreide navigasiebalkinhoud te stelmax-height
en te blaai .
Hier is 'n voorbeeld van al die sub-komponente ingesluit in 'n responsiewe lig-tema navigasiebalk wat outomaties ineenstort by die lg
(groot) breekpunt.
<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>
Hierdie voorbeeld gebruik agtergrond ( bg-light
) en spasiëring ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
) nutsklasse.
Handelsmerk
Die .navbar-brand
kan op die meeste elemente toegepas word, maar 'n anker werk die beste, aangesien sommige elemente nutsklasse of pasgemaakte style kan vereis.
Teks
Voeg jou teks binne 'n element saam met die .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>
Beeld
Jy kan die teks binne die vervang .navbar-brand
met 'n <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>
Beeld en teks
Jy kan ook van 'n paar bykomende nutsprogramme gebruik maak om 'n prent en teks op dieselfde tyd by te voeg. Let op die byvoeging van .d-inline-block
en .align-text-top
op die <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-navigasieskakels bou voort op ons .nav
opsies met hul eie wysigerklas en vereis die gebruik van wissel- klasse vir behoorlike responsiewe stilering. Navigasie in navigasiebalke sal ook groei om soveel horisontale spasie as moontlik te beset om jou navigasiebalkinhoud veilig in lyn te hou.
Voeg die .active
klas by .nav-link
om die huidige bladsy aan te dui.
Neem asseblief kennis dat jy ook die aria-current
kenmerk op die aktiewe moet byvoeg .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>
En omdat ons klasse vir ons navs gebruik, kan jy die lys-gebaseerde benadering heeltemal vermy as jy wil.
<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>
Jy kan ook aftreklys in jou navigasiebalk gebruik. Aftrekkieslyste vereis 'n omvou-element vir posisionering, so maak seker dat jy aparte en geneste elemente gebruik vir .nav-item
en .nav-link
soos hieronder getoon.
<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>
Vorms
Plaas verskeie vormkontroles en komponente binne 'n navigasiebalk:
<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>
Onmiddellike kinderelemente van .navbar
gebruik buig uitleg en sal verstek na justify-content: space-between
. Gebruik addisionele flex-nutsprogramme soos nodig om hierdie gedrag aan te pas.
<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>
Insetgroepe werk ook. As jou navigasiebalk 'n hele vorm is, of meestal 'n vorm, kan jy die <form>
element as die houer gebruik en bietjie HTML stoor.
<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>
Verskeie knoppies word ook ondersteun as deel van hierdie navigasiebalkvorms. Dit is ook 'n goeie herinnering dat vertikale belyningshulpmiddels gebruik kan word om elemente van verskillende groottes in lyn te bring.
<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>
Teks
Navbars kan stukkies teks bevat met behulp van .navbar-text
. Hierdie klas pas vertikale belyning en horisontale spasiëring vir stringe teks aan.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Meng en pas saam met ander komponente en hulpmiddels soos nodig.
<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>
Kleurskemas
Die tema van die navigasiebalk was nog nooit so maklik nie, danksy die kombinasie van temaklasse en background-color
nutsprogramme. Kies uit .navbar-light
vir gebruik met ligte agtergrondkleure, of .navbar-dark
vir donker agtergrondkleure. Pas dan aan met .bg-*
hulpprogramme.
<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>
Houers
Alhoewel dit nie nodig is nie, kan jy 'n navigasiebalk in 'n toevou .container
om dit op 'n bladsy te sentreer – let egter daarop dat 'n binnehouer steeds benodig word. Of jy kan 'n houer in die byvoeg .navbar
om slegs die inhoud van 'n vaste of statiese boonste navigasiebalk te sentreer .
<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>
Gebruik enige van die responsiewe houers om te verander hoe wyd die inhoud in jou navigasiebalk aangebied word.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Plasing
Gebruik ons posisiehulpmiddels om navigasiebalke in nie-statiese posisies te plaas. Kies tussen vas na bo, vas aan onder, of vas aan bo (blaai saam met die bladsy totdat dit bo bereik, en bly dan daar). Vaste navigasiebalke gebruik position: fixed
, wat beteken dat hulle uit die normale vloei van die DOM getrek word en dalk pasgemaakte CSS (bv. padding-top
op die <body>
) vereis om oorvleueling met ander elemente te voorkom.
Neem ook kennis dat .sticky-top
gebruike position: sticky
, wat nie ten volle in elke blaaier ondersteun word nie .
<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>
Blaai
Voeg .navbar-nav-scroll
by 'n .navbar-nav
(of ander navigasiebalk-subkomponent) om vertikale blaai binne die wisselbare inhoud van 'n ingevoude navigasiebalk moontlik te maak. By verstek skop blaai in by 75vh
(of 75% van die viewport-hoogte), maar jy kan dit ignoreer met die plaaslike CSS-pasgemaakte eiendom --bs-navbar-height
of pasgemaakte style. By groter kykpoorte wanneer die navigasiebalk uitgebrei word, sal inhoud verskyn soos dit in 'n versteknavigasiebalk verskyn.
Neem asseblief kennis dat hierdie gedrag 'n potensiële nadeel het van overflow
—wanneer instelling overflow-y: auto
(vereis om die inhoud hier te blaai), overflow-x
is die ekwivalent van auto
, wat 'n mate van horisontale inhoud sal sny.
Hier is 'n voorbeeld navbar wat gebruik maak .navbar-nav-scroll
met style="--bs-scroll-height: 100px;"
, met 'n paar ekstra marge nutsprogramme vir optimale spasiëring.
<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>
Responsiewe gedrag
Navbars kan .navbar-toggler
, .navbar-collapse
, en .navbar-expand{-sm|-md|-lg|-xl|-xxl}
klasse gebruik om te bepaal wanneer hul inhoud agter 'n knoppie ineenstort. In kombinasie met ander nutsprogramme kan u maklik kies wanneer u spesifieke elemente moet wys of versteek.
Vir navigasiebalke wat nooit ineenstort nie, voeg die .navbar-expand
klas op die navigasiebalk by. Vir navigasiebalke wat altyd ineenstort, moenie enige .navbar-expand
klas byvoeg nie.
Wissel
Navbar-wisselaars is by verstek linksbelyn, maar sou hulle 'n broer- of susterelement soos 'n volg .navbar-brand
, sal hulle outomaties heel regs belyn word. Deur jou opmaak om te keer, sal die plasing van die wisselaar omkeer. Hieronder is voorbeelde van verskillende skakelstyle.
Met geen .navbar-brand
vertoon by die kleinste breekpunt nie:
<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>
Met 'n handelsnaam aan die linkerkant en skakelaar aan die regterkant:
<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>
Met 'n skakelaar aan die linkerkant en handelsnaam aan die regterkant:
<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>
Eksterne inhoud
Soms wil jy die ineenvou-inprop gebruik om 'n houerelement te aktiveer vir inhoud wat struktureel buite die .navbar
. Omdat ons inprop werk op die id
en data-bs-target
ooreenstem, is dit maklik gedoen!
<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>
Wanneer jy dit doen, beveel ons aan om bykomende JavaScript in te sluit om die fokus programmaties na die houer te skuif wanneer dit oopgemaak word. Andersins sal sleutelbordgebruikers en gebruikers van ondersteunende tegnologieë waarskynlik moeilik wees om die nuut geopenbaarde inhoud te vind - veral as die houer wat oopgemaak is voor die wisselaar in die dokument se struktuur kom. Ons beveel ook aan om seker te maak dat die wisselaar die aria-controls
kenmerk het, wat na die id
van die inhoudhouer wys. In teorie laat dit gebruikers van hulptegnologie toe om direk van die wisselaar na die houer wat dit beheer te spring - maar ondersteuning hiervoor is tans redelik onduidelik.
Sass
Veranderlikes
$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;
Lus
Responsiewe navbalk uitbrei/vou-klasse (bv. .navbar-expand-lg
) word met die kaart gekombineer $breakpoints
en deur 'n lus in gegenereer 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;
}
}
}
}
}