Navbar
Dokumentaatio ja esimerkkejä Bootstrapin tehokkaasta, responsiivisesta navigointiotsikosta, navigointipalkista. Sisältää tuen brändäykselle, navigoinnille ja muille, mukaan lukien tuki tiivistyslaajennuksellemme.
Kuinka se toimii
Seuraavassa on mitä sinun tulee tietää ennen kuin aloitat navigointipalkin käytön:
- Navigointipalkit vaativat kääreen responsiivista kutistamista ja
.navbar
värimaailmaluokkia varten ..navbar-expand{-sm|-md|-lg|-xl|-xxl}
- Navigointipalkit ja niiden sisältö ovat oletuksena sulavia. Muuta säilöä rajoittaaksesi niiden vaakasuuntaista leveyttä eri tavoin.
- Käytä väli- ja flex utility -luokkia ohjataksesi välilyöntejä ja kohdistusta navigointipalkeissa .
- Navigointipalkit reagoivat oletusarvoisesti, mutta voit muuttaa niitä helposti muokkaamalla sitä. Responsiivinen käyttäytyminen riippuu Collapse JavaScript -laajennuksestamme.
- Varmista saavutettavuus käyttämällä
<nav>
elementtiä tai, jos käytät yleisempää elementtiä, kuten<div>
, lisäärole="navigation"
jokaiseen navigointipalkkiin tunnistaaksesi sen selkeästi maamerkkialueeksi aputekniikoiden käyttäjille. - Ilmoita nykyinen kohde käyttämällä
aria-current="page"
nykyistä sivua taiaria-current="true"
joukon nykyistä kohdetta.
prefers-reduced-motion
mediakyselystä. Katso
esteettömyysdokumentaation osio liikkeen vähentämisestä .
Tuettu sisältö
Navbareissa on sisäänrakennettu tuki kouralliselle osakomponentille. Valitse tarvittaessa seuraavista:
.navbar-brand
yrityksesi, tuotteesi tai projektisi nimeen..navbar-nav
täyskorkeaa ja kevyttä navigointia varten (mukaan lukien pudotusvalikoiden tuki)..navbar-toggler
käytettäväksi tiivistyslaajennuksen ja muiden navigoinnin vaihtotoimintojemme kanssa .- Jousto- ja välitysapuohjelmat kaikille lomakeohjaimille ja -toiminnoille.
.navbar-text
pystysuoraan keskitettyjen tekstijonojen lisäämiseen..collapse.navbar-collapse
navigointipalkin sisällön ryhmittelyyn ja piilottamiseen ylätason keskeytyskohdan mukaan.- Lisää valinnainen
.navbar-scroll
, jos haluat määrittäämax-height
ja vierittää laajennettua navigointipalkin sisältöä .
Tässä on esimerkki kaikista alikomponenteista, jotka sisältyvät reagoivaan valoteemalla olevaan navigointipalkkiin, joka kutistuu automaattisesti lg
(isossa) keskeytyspisteessä.
<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>
Tässä esimerkissä käytetään tausta ( bg-light
) ja väli ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
) hyödyllisyysluokkia.
Brändi
Voidaan soveltaa useimpiin elementteihin , .navbar-brand
mutta ankkuri toimii parhaiten, koska jotkin elementit saattavat vaatia hyödyllisyysluokkia tai mukautettuja tyylejä.
Teksti
Lisää tekstisi elementtiin .navbar-brand
luokan kanssa.
<!-- 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>
Kuva
Voit korvata tekstin .navbar-brand
sisällä <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>
Kuva ja teksti
Voit myös käyttää joitain lisäapuohjelmia kuvan ja tekstin lisäämiseen samanaikaisesti. Huomaa lisäys .d-inline-block
ja .align-text-top
.<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
Navigointilinkit perustuvat .nav
vaihtoehtoihimme omalla muokkausluokalla ja vaativat vaihtoluokkien käyttöä oikean responsiivisen tyylin aikaansaamiseksi. Navigointipalkkien navigointi kasvaa myös viemään mahdollisimman paljon vaakasuuntaista tilaa , jotta navigointipalkin sisältö pysyy varmasti kohdakkain.
Lisää .active
luokka .nav-link
osoittamaan nykyinen sivu.
Huomaa, että sinun tulee myös lisätä aria-current
attribuutti aktiiviseen .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>
Ja koska käytämme luokkia naveissamme, voit halutessasi välttää luettelopohjaisen lähestymistavan kokonaan.
<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>
Voit myös käyttää avattavia valikoita navigointipalkissa. Avattavat valikot edellyttävät käärimiselementin sijoittamista varten, joten muista käyttää erillisiä ja sisäkkäisiä elementtejä .nav-item
alla .nav-link
kuvatulla tavalla.
<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>
Lomakkeet
Sijoita erilaisia lomakesäätimiä ja komponentteja navigointipalkkiin:
<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>
Käytön välittömät alielementit .navbar
joustavat asettelun ja ovat oletuksena justify-content: space-between
. Käytä tarvittaessa muita joustavia apuohjelmia tämän toiminnan säätämiseen.
<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>
Myös syöttöryhmät toimivat. Jos navigointipalkki on koko lomake tai enimmäkseen lomake, voit käyttä�� <form>
elementtiä säilönä ja tallentaa HTML-koodia.
<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>
Erilaisia painikkeita tuetaan myös osana näitä navigointipalkin lomakkeita. Tämä on myös hyvä muistutus siitä, että pystysuuntaista kohdistusta voidaan käyttää erikokoisten elementtien kohdistamiseen.
<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>
Teksti
Navigointipalkit voivat sisältää tekstiä :n avulla .navbar-text
. Tämä luokka säätää tekstijonojen pystysuuntausta ja vaakaväliä.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Sekoita ja sovita muiden komponenttien ja apuohjelmien kanssa tarpeen mukaan.
<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>
Värimallit
Navigointipalkin teeman tekeminen ei ole koskaan ollut helpompaa teemaluokkien ja background-color
apuohjelmien yhdistelmän ansiosta. Valitse .navbar-light
käytettäväksi vaaleiden taustavärien kanssa tai .navbar-dark
tummien taustavärien kanssa. Mukauta sitten .bg-*
apuohjelmilla.
<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>
Säiliöt
Vaikka se ei ole pakollinen, voit kääriä navigointipalkin a -kenttään .container
keskittääksesi sen sivulle. Huomaa kuitenkin, että sisäsäiliö tarvitaan silti. Tai voit lisätä säiliön sisälle keskittääksesi .navbar
vain kiinteän tai staattisen ylänavigointipalkin sisällön .
<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>
Käytä mitä tahansa responsiivisista säilöistä muuttaaksesi, kuinka laajasti navigointipalkin sisältö näytetään.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Sijoitus
Käytä sijaintityökalujamme navigointipalkkien sijoittamiseen ei-staattisiin paikkoihin. Valitse kiinteä ylös, kiinnitetty alaosaan tai kiinnitetty yläosaan (vieritä sivua, kunnes se saavuttaa yläreunan, ja pysyy sitten siellä). Kiinteät navigointipalkit käyttävät position: fixed
, mikä tarkoittaa, että ne vedetään normaalista DOM-virrasta ja saattavat vaatia mukautetun CSS padding-top
:n (esim. <body>
) päällekkäisyyden estämiseksi muiden elementtien kanssa.
Huomaa myös, että .sticky-top
käyttää position: sticky
, jota ei tueta täysin kaikissa selaimissa .
<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>
Vieritys
Lisää .navbar-nav-scroll
( .navbar-nav
tai muuhun navigointipalkin alikomponenttiin) mahdollistaaksesi pystysuoran vierityksen tiivistetyn navigointipalkin vaihdettavan sisällön sisällä. Oletusarvoisesti vieritys alkaa 75vh
(tai 75 %:lla näkymän korkeudesta), mutta voit ohittaa sen paikallisella mukautetulla CSS-ominaisuudella --bs-navbar-height
tai mukautetuilla tyyleillä. Kun navigointipalkkia laajennetaan suuremmissa näytöissä, sisältö näkyy samalla tavalla kuin oletusnavigointipalkissa.
Huomaa, että tähän käytökseen liittyy mahdollinen haittapuoli: overflow
-kun asetus overflow-y: auto
(vaaditaan sisällön vierittämiseen tässä) overflow-x
on vastineeksi auto
, joka rajaa jonkin verran vaakasuuntaista sisältöä.
Tässä on esimerkki navigointipalkista, jossa käytetään .navbar-nav-scroll
: tä style="--bs-scroll-height: 100px;"
ja joitain ylimääräisiä marginaaliapuohjelmia optimaalisen välin saavuttamiseksi.
<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>
Responsiiviset käytökset
Navigointipalkit voivat käyttää .navbar-toggler
, .navbar-collapse
, ja .navbar-expand{-sm|-md|-lg|-xl|-xxl}
luokkia määrittääkseen, milloin niiden sisältö kutistuu painikkeen taakse. Yhdessä muiden apuohjelmien kanssa voit helposti valita, milloin haluat näyttää tai piilottaa tietyt elementit.
Lisää luokka navigointipalkkiin, jos ne eivät koskaan .navbar-expand
kutistu. Älä lisää .navbar-expand
luokkaa aina kutistuviin navigointipalkkeihin.
Toggler
Navigointipalkin vaihtajat tasataan oletuksena vasemmalle, mutta jos ne seuraavat sisarelementtiä, kuten .navbar-brand
, ne tasataan automaattisesti äärioikealle. Merkintöjen kääntäminen kääntää vaihtopainikkeen sijainnin päinvastaiseksi. Alla on esimerkkejä erilaisista vaihtotyyleistä.
Ei .navbar-brand
näy pienimmässä keskeytyskohdassa:
<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>
Kun tuotemerkki näkyy vasemmalla ja vaihtokytkin oikealla:
<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>
Vasemmalla kytkin ja oikealla tuotenimi:
<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>
Ulkoinen sisältö
Joskus haluat käyttää tiivistyslaajennusta käynnistääksesi säilön elementin sisällölle, joka rakenteellisesti sijaitsee .navbar
. Koska laajennuksemme toimii id
ja data-bs-target
vastaa, se on helppo tehdä!
<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>
Kun teet tämän, suosittelemme lisäämään JavaScriptin, jotta kohdistus siirretään ohjelmallisesti säilöön, kun se avataan. Muuten näppäimistön käyttäjillä ja avustavien tekniikoiden käyttäjillä on todennäköisesti vaikeuksia löytää juuri paljastettua sisältöä - varsinkin jos avattu säilö on ennen vaihtopainiketta dokumentin rakenteessa. Suosittelemme myös varmistamaan, että vaihtajalla on aria-controls
attribuutti, joka osoittaa id
sisältösäilön kohtaan. Teoriassa tämän avulla aputekniikan käyttäjät voivat siirtyä suoraan vaihtokytkimestä sen ohjaamaan säiliöön, mutta tuki tälle on tällä hetkellä melko hajanaista.
Sass
Muuttujat
$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;
Silmukka
Responsiiviset navigointipalkin laajennus-/tiivistysluokat (esim. .navbar-expand-lg
) yhdistetään $breakpoints
karttaan ja luodaan silmukan kautta 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;
}
}
}
}
}