Navbar
Dokumentatioun an Beispiller fir Bootstrap's mächtege, reaktiounsfäeger Navigatiounsheader, d'Navbar. Ëmfaasst Ënnerstëtzung fir Branding, Navigatioun, a méi, dorënner Ënnerstëtzung fir eise Zesummebroch Plugin.
Wéi et funktionnéiert
Hei ass wat Dir wësse musst ier Dir mat der Navbar ufänkt:
- Navbars verlaangen eng wrapping
.navbar
mat.navbar-expand{-sm|-md|-lg|-xl|-xxl}
fir reaktiounsfäeger Zesummebroch an Faarf Schema Klassen. - Navbars an hiren Inhalt si flësseg par défaut. Ännert de Container fir hir horizontale Breet op verschidde Weeër ze limitéieren.
- Benotzt eis Abstands- a Flex- Utility-Klassen fir Abstand an Ausriichtung bannent Navbars ze kontrolléieren.
- Navbars reaktiounsfäeger par défaut, awer Dir kënnt se einfach änneren fir dat z'änneren. Responsabel Verhalen hänkt vun eisem Collapse JavaScript Plugin of.
- Vergewëssert Iech Accessibilitéit andeems Dir en
<nav>
Element benotzt oder, wann Dir e méi generescht Element benotzt wéi e<div>
, füügt engrole="navigation"
un all Navbar fir et explizit als Landmarkregioun fir Benotzer vun Hëllefstechnologien z'identifizéieren. - Gitt den aktuellen Element un andeems Dir
aria-current="page"
fir déi aktuell Säit oderaria-current="true"
fir den aktuellen Element an engem Set benotzt.
prefers-reduced-motion
Medienufro of. Kuckt d'
Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .
Ënnerstëtzt Inhalt
Navbars kommen mat agebauter Ënnerstëtzung fir eng Handvoll Ënnerkomponenten. Wielt aus de folgende wéi néideg:
.navbar-brand
fir Är Firma, Produkt oder Projet Numm..navbar-nav
fir eng voll Héicht a liicht Navigatioun (inklusiv Ënnerstëtzung fir Dropdowns)..navbar-toggler
fir ze benotzen mat eisem Zesummebroch Plugin an aner Navigatioun toggling Behuelen.- Flex an Ofstand Utilities fir all Form Kontrollen an Aktiounen.
.navbar-text
fir vertikal zentréiert Strings vum Text ze addéieren..collapse.navbar-collapse
fir Gruppéierung an Verstoppen navbar Inhalt vun engem Elterendeel breakpoint.- Füügt eng fakultativ fir en erweiderten Navbar Inhalt
.navbar-scroll
ze setzenmax-height
a scrollen .
Hei ass e Beispill vun all Ënnerkomponenten, déi an enger reaktiounsfäeger liichtthematescher Navbar abegraff sinn, déi automatesch um lg
(grousse) Breakpunkt zesummeklappen.
<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>
Dëst Beispill benotzt Hannergrond ( bg-light
) an Abstand ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
) Utility Klassen.
Mark
Dee .navbar-brand
kann op déi meescht Elementer applizéiert ginn, awer en Anker funktionnéiert am Beschten, well e puer Elementer Utilityklassen oder personaliséiert Stiler erfuerderen.
Text
Füügt Ären Text an engem Element mat der .navbar-brand
Klass.
<!-- 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>
Bild
Dir kënnt den Text bannent der .navbar-brand
mat engem ersetzen <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>
Bild an Text
Dir kënnt och e puer zousätzlech Utilities benotzen fir e Bild an Text zur selwechter Zäit ze addéieren. Notéiert d'Zousätzlech vun .d-inline-block
an .align-text-top
op der <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 Navigatiounslinks bauen op eis .nav
Optiounen mat hirer eegener Modifikateur Klass a verlaangen d'Benotzung vun Toggler Klassen fir e richtege reaktiounsfäeger Styling. Navigatioun an Navbars wäert och wuessen fir sou vill horizontal Plaz wéi méiglech ze besetzen fir Ären Navbar Inhalt sécher ausgeriicht ze halen.
Füügt d' .active
Klass un .nav-link
fir déi aktuell Säit unzeginn.
Notéiert w.e.g. datt Dir och den aria-current
Attribut op den aktiven .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>
A well mir Klassen fir eis Navs benotzen, kënnt Dir d'Lëscht-baséiert Approche ganz vermeiden wann Dir wëllt.
<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>
Dir kënnt och Dropdowns an Ärer Navbar benotzen. Dropdown-Menüen erfuerderen e Wrapping-Element fir d'Positionéierung, also gitt sécher datt Dir getrennt an nestet Elementer benotzt fir .nav-item
a .nav-link
wéi hei ënnendrënner.
<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>
Formen
Place verschidde Form Kontrollen a Komponente bannent enger 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>
Direkt Kand Elementer vun .navbar
benotzen flex Layout a wäert Standard op justify-content: space-between
. Benotzt zousätzlech Flex Utilities wéi néideg fir dëst Verhalen unzepassen.
<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 Gruppen Aarbecht, ze. Wann Är Navbar eng ganz Form ass, oder meeschtens eng Form, kënnt Dir d' <form>
Element als Container benotzen an HTML späicheren.
<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>
Verschidde Knäppercher ginn och als Deel vun dësen Navbar Formen ënnerstëtzt. Dëst ass och eng super Erënnerung datt vertikal Ausrichtung Utilities kënne benotzt ginn fir Elementer vu verschiddene Gréissten auszegläichen.
<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>
Text
Navbars kënne Stécker vum Text mat der Hëllef vun .navbar-text
. Dës Klass passt d'Vertikal Ausrichtung an d'horizontale Abstand fir Textsträicher un.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Mix a passt mat anere Komponenten an Utilities wéi néideg.
<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>
Faarf Schemaen
Themen vun der Navbar war ni méi einfach dank der Kombinatioun vun Themeklassen an background-color
Utilities. Wielt aus .navbar-light
fir ze benotzen mat hellem Hannergrondfaarwen, oder .navbar-dark
fir donkel Hannergrondfaarwen. Dann, personaliséiere mat .bg-*
Utilities.
<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>
Container
Och wann et net erfuerderlech ass, kënnt Dir eng Navbar an engem wéckelen .container
fir se op enger Säit ze zentréieren - awer bemierkt datt en banneschten Container nach ëmmer erfuerderlech ass. Oder Dir kënnt e Container bannen derbäisetzen .navbar
fir nëmmen den Inhalt vun enger fixer oder statescher Top Navbar ze zentréieren .
<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>
Benotzt ee vun de reaktiounsfäeger Container fir ze änneren wéi breet den Inhalt an Ärer Navbar presentéiert gëtt.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Placement
Benotzt eis Positiouns Utilities fir Navbars an net-statesch Positiounen ze placéieren. Wielt tëscht fixéiert no uewen, fixéiert no ënnen oder eropgeknäppt (scrollt mat der Säit bis se uewen erreecht, da bleift do). Fixed Navbars benotzen position: fixed
, dat heescht datt se aus dem normale Floss vun der DOM gezunn sinn a kënnen personaliséiert CSS erfuerderen (zB padding-top
op der <body>
) fir Iwwerlappung mat aneren Elementer ze vermeiden.
Notéiert och datt .sticky-top
benotzt position: sticky
, déi net voll an all Browser ënnerstëtzt gëtt .
<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>
Scrollen
Füügt .navbar-nav-scroll
un eng .navbar-nav
(oder aner Navbar Ënnerkomponent) fir vertikal Scrollen am toggleablen Inhalt vun enger zesummegeklappt Navbar z'erméiglechen. Par défaut geet d'Scrolling an 75vh
(oder 75% vun der Viewport Héicht), awer Dir kënnt dat iwwerschreiden mat der lokaler CSS personaliséierter Eegeschafte --bs-navbar-height
oder personaliséierte Stiler. Bei gréissere Viewports wann d'Navbar erweidert gëtt, erschéngt Inhalt wéi et an enger Standardnavbar ass.
Notéiert w.e.g. datt dëst Verhalen mat engem potenziellen Nodeel kënnt vun overflow
-wann Astellung overflow-y: auto
(erfuerderlech fir den Inhalt hei ze scrollen), overflow-x
ass d'Äquivalent vun auto
, wat e puer horizontalen Inhalter cropt.
Hei ass e Beispill navbar benotzt .navbar-nav-scroll
mat style="--bs-scroll-height: 100px;"
, mat e puer extra Margin Utilities fir optimal Abstand.
<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>
Reaktiounsfäeger Verhalen
Navbars kënne benotzen .navbar-toggler
, .navbar-collapse
, a .navbar-expand{-sm|-md|-lg|-xl|-xxl}
Klassen fir ze bestëmmen wann hiren Inhalt hannert engem Knäppchen zesummeklappt. A Kombinatioun mat aneren Utilities kënnt Dir ganz einfach wielen wéini Dir speziell Elementer ze weisen oder verstoppt.
Fir Navbars déi ni zesummeklappen, füügt d' .navbar-expand
Klass op der Navbar. Fir Navbars déi ëmmer zesummeklappen, füügt keng .navbar-expand
Klass un.
Toggler
Navbar Togglers sinn par défaut lénks ausgeriicht, awer sollten se e Geschwësterelement wéi e verfollegen .navbar-brand
, si ginn automatesch no riets ausgeriicht. Ëmgekéiert Är Markup wäert d'Placement vum Toggler ëmgedréint ginn. Drënner sinn Beispiller vu verschiddene Toggle Stiler.
Mat kee .navbar-brand
gewisen um klengste Breakpunkt:
<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>
Mat engem Markennumm lénks gewisen an Toggler op der rietser Säit:
<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>
Mat engem Toggler op der lénker Säit a Markennumm op der rietser Säit:
<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>
Extern Inhalt
Heiansdo wëllt Dir den Zesummebroch Plugin benotzen fir e Containerelement fir Inhalter auszeléisen deen strukturell ausserhalb vun der .navbar
. Well eise Plugin funktionnéiert op der id
a data-bs-target
passend, dat ass einfach gemaach!
<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>
Wann Dir dëst maacht, empfeelen mir zousätzlech JavaScript abegraff fir de Fokus programmatesch op de Container ze réckelen wann et opgemaach gëtt. Soss wäerten d'Tastaturbenotzer an d'Benotzer vun Assistenztechnologien et méiglecherweis schwéier hunn den nei opgedeckten Inhalt ze fannen - besonnesch wann de Container, deen opgemaach gouf, virum Toggler an der Struktur vum Dokument kënnt. Mir recommandéieren och sécherzestellen datt den Toggler den aria-controls
Attribut huet, weist op id
den Inhaltsbehälter. An der Theorie erlaabt dëst Hëllefstechnologie Benotzer direkt vum Toggler an de Container ze sprangen deen et kontrolléiert - awer d'Ënnerstëtzung fir dëst ass de Moment zimlech flësseg.
Sass
Variablen
$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;
Loop
Reaktiounsfäeger navbar expandéieren / Zesummebroch Klassen (zB, .navbar-expand-lg
) si mat der Kaart kombinéiert $breakpoints
an duerch eng Loop generéiert an 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;
}
}
}
}
}