Navbar
Dokumentation og eksempler til Bootstraps kraftfulde, responsive navigationsheader, navbaren. Inkluderer support til branding, navigation og mere, inklusive support til vores sammenbrudsplugin.
Hvordan det virker
Her er hvad du skal vide, før du går i gang med navbaren:
- Navbars kræver en indpakning
.navbar
med.navbar-expand{-sm|-md|-lg|-xl|-xxl}
for responsiv kollaps og farveskemaklasser . - Navbars og deres indhold er flydende som standard. Skift beholderen for at begrænse deres vandrette bredde på forskellige måder.
- Brug vores spacing- og flex -værktøjsklasser til at kontrollere afstand og justering i navbarer.
- Navbars er som standard responsive, men du kan nemt ændre dem for at ændre det. Responsiv adfærd afhænger af vores Collapse JavaScript-plugin.
- Sikre tilgængelighed ved at bruge et
<nav>
element, eller, hvis du bruger et mere generisk element som f.eks. en<div>
, tilføj enrole="navigation"
til hver navbar for eksplicit at identificere den som en skelsættende region for brugere af hjælpeteknologier. - Angiv det aktuelle element ved at bruge
aria-current="page"
for den aktuelle side elleraria-current="true"
for det aktuelle element i et sæt.
prefers-reduced-motion
medieforespørgslen. Se afsnittet om
reduceret bevægelse i vores tilgængelighedsdokumentation .
Understøttet indhold
Navbars kommer med indbygget understøttelse af en håndfuld underkomponenter. Vælg mellem følgende efter behov:
.navbar-brand
for dit firma-, produkt- eller projektnavn..navbar-nav
for en letvægtsnavigation i fuld højde (inklusive understøttelse af dropdowns)..navbar-toggler
til brug med vores kollaps-plugin og anden navigationsskifteadfærd .- Flex- og afstandsværktøjer til alle former for kontrol og handlinger.
.navbar-text
til tilføjelse af lodret centrerede tekststrenge..collapse.navbar-collapse
til at gruppere og skjule navbarens indhold efter et overordnet brudpunkt.- Tilføj en valgfri
.navbar-scroll
for at indstille etmax-height
og rul udvidet navbar indhold .
Her er et eksempel på alle de underkomponenter, der er inkluderet i en responsiv lys-tema navbar, der automatisk kollapser ved det lg
(store) brudpunkt.
<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>
Dette eksempel bruger hjælpeklasserne baggrund ( bg-light
) og mellemrum ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
).
Mærke
Den .navbar-brand
kan anvendes på de fleste elementer, men et anker fungerer bedst, da nogle elementer kan kræve brugsklasser eller brugerdefinerede stilarter.
Tekst
Tilføj din tekst i et element med .navbar-brand
klassen.
<!-- 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>
Billede
Du kan erstatte teksten i .navbar-brand
med en <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>
Billede og tekst
Du kan også gøre brug af nogle ekstra værktøjer til at tilføje et billede og tekst på samme tid. Bemærk tilføjelsen af .d-inline-block
og .align-text-top
på <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-navigationslinks bygger på vores .nav
muligheder med deres egen modifikationsklasse og kræver brug af skifteklasser for korrekt responsiv styling. Navigation i navbarer vil også vokse til at optage så meget vandret plads som muligt for at holde dit navbar-indhold sikkert justeret.
Tilføj .active
klassen for .nav-link
at angive den aktuelle side.
Bemærk venligst, at du også skal tilføje aria-current
attributten på den aktive .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>
Og fordi vi bruger klasser til vores navs, kan du helt undgå den listebaserede tilgang, hvis du vil.
<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>
Du kan også bruge rullemenuer i din navbar. Rullemenuer kræver et indpakningselement til positionering, så sørg for at bruge separate og indlejrede elementer til .nav-item
og .nav-link
som vist nedenfor.
<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>
Formularer
Placer forskellige formularkontrolelementer og komponenter i en navigeringslinje:
<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>
Umiddelbare underordnede elementer af .navbar
brug flex layout og vil som standard være justify-content: space-between
. Brug yderligere flex-værktøjer efter behov for at justere denne adfærd.
<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>
Inputgrupper fungerer også. Hvis din navbar er en hel formular, eller for det meste en formular, kan du bruge <form>
elementet som container og gemme noget 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>
Forskellige knapper understøttes også som en del af disse navbar-formularer. Dette er også en god påmindelse om, at værktøjer til lodret justering kan bruges til at justere elementer i forskellige størrelser.
<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>
Tekst
Navbars kan indeholde bidder af tekst ved hjælp af .navbar-text
. Denne klasse justerer lodret justering og vandret afstand for tekststrenge.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Bland og match med andre komponenter og værktøjer efter behov.
<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>
Farveskemaer
Temalægning af navbaren har aldrig været nemmere takket være kombinationen af temaklasser og background-color
hjælpeprogrammer. Vælg mellem .navbar-light
til brug med lyse baggrundsfarver eller .navbar-dark
til mørke baggrundsfarver. Tilpas derefter med .bg-*
hjælpeprogrammer.
<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>
Containere
Selvom det ikke er påkrævet, kan du pakke en navbar ind i en .container
for at centrere den på en side – men bemærk, at en indre beholder stadig er påkrævet. Eller du kan tilføje en beholder inde i .navbar
for kun at centrere indholdet af en fast eller statisk top 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>
Brug en af de responsive containere til at ændre, hvor bredt indholdet i din navbar vises.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Placering
Brug vores positionsværktøjer til at placere navbarer i ikke-statiske positioner. Vælg mellem fast til toppen, fastgjort til bunden eller klæbet til toppen (ruller med siden, indtil den når toppen, og bliver derefter der). Faste navbarer bruger position: fixed
, hvilket betyder, at de er trukket fra det normale flow af DOM og kan kræve tilpasset CSS (f.eks. padding-top
på <body>
) for at forhindre overlapning med andre elementer.
Bemærk også, at .sticky-top
bruger position: sticky
, som ikke er fuldt understøttet i alle browsere .
<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>
Rulning
Føj .navbar-nav-scroll
til en .navbar-nav
(eller en anden navbar-underkomponent) for at aktivere lodret rulning inden for det omskiftelige indhold af en sammenklappet navbar. Som standard starter rulning ved 75vh
(eller 75 % af visningsportens højde), men du kan tilsidesætte det med den lokale CSS-tilpassede egenskab --bs-navbar-height
eller tilpassede stilarter. Ved større visningsporte, når navbaren er udvidet, vil indholdet blive vist, som det gør i en standard navbar.
Bemærk venligst, at denne adfærd har en potentiel ulempe : overflow
-når indstilling overflow-y: auto
(kræves for at rulle indholdet her), overflow-x
svarer til auto
, hvilket vil beskære noget vandret indhold.
Her er et eksempel på en navbar, der bruger .navbar-nav-scroll
med style="--bs-scroll-height: 100px;"
, med nogle ekstra margenværktøjer for optimal afstand.
<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>
Responsiv adfærd
Navbars kan bruge .navbar-toggler
, .navbar-collapse
, og .navbar-expand{-sm|-md|-lg|-xl|-xxl}
klasser til at bestemme, hvornår deres indhold kollapser bag en knap. I kombination med andre hjælpeprogrammer kan du nemt vælge, hvornår du vil vise eller skjule bestemte elementer.
For navbarer, der aldrig kollapser, skal du tilføje .navbar-expand
klassen på navbaren. For navbarer, der altid skjuler, skal du ikke tilføje nogen .navbar-expand
klasse.
Toggler
Navbar skifter er venstrejusteret som standard, men skulle de følge et søskendeelement som en .navbar-brand
, vil de automatisk blive justeret til højre. Hvis du vender om din markering, vil du ændre placeringen af skifteren. Nedenfor er eksempler på forskellige skifte-stile.
Med ingen .navbar-brand
vist ved det mindste brudpunkt:
<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>
Med et mærkenavn vist til venstre og skifte til højre:
<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>
Med en skifter til venstre og mærkenavn til højre:
<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>
Eksternt indhold
Nogle gange vil du bruge sammenbrudspluginnet til at udløse et containerelement for indhold, der strukturelt sidder uden for .navbar
. Fordi vores plugin fungerer på id
og data-bs-target
matcher, er det nemt at gøre!
<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>
Når du gør dette, anbefaler vi at inkludere yderligere JavaScript for at flytte fokus programmatisk til containeren, når den åbnes. Ellers vil tastaturbrugere og brugere af hjælpeteknologier sandsynligvis have svært ved at finde det nyligt afslørede indhold - især hvis containeren, der blev åbnet, kommer før skifteren i dokumentets struktur. Vi anbefaler også at sikre, at skifteren har aria-controls
attributten, der peger på id
indholdsbeholderen. I teorien giver dette hjælpeteknologibrugere mulighed for at hoppe direkte fra skifteren til den beholder, den styrer - men understøttelsen af dette er i øjeblikket ret usammenhængende.
Sass
Variabler
$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;
Løkke
Responsive navbar expand/collapse-klasser (f.eks. .navbar-expand-lg
) kombineres med $breakpoints
kortet og genereres gennem en loop i 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;
}
}
}
}
}