in English

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.

Op hierdie bladsy

Hoe dit werk

Hier is wat jy moet weet voordat jy met die navigasiebalk begin:

Navbars vereis 'n wikkel .navbarmet .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 'n role="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 of aria-current="true"vir die huidige item in 'n stel te gebruik.
Nuut in v5.2.0: Navbars kan ge-tema word met CSS-veranderlikes wat na die .navbarbasisklas omvang is. .navbar-lightis afgekeur en .navbar-darkis herskryf om CSS-veranderlikes te ignoreer in plaas daarvan om bykomende style by te voeg.

Die animasie-effek van hierdie komponent is afhanklik van die prefers-reduced-motionmedianavraag. 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-brandvir jou maatskappy-, produk- of projeknaam.
.navbar-navvir 'n volle hoogte en liggewig navigasie (insluitend ondersteuning vir dropdowns).
.navbar-togglervir gebruik met ons invou-inprop en ander navigasiewisselgedrag .
Buig en spasiëring nutsprogramme vir enige vorm kontroles en aksies.
.navbar-textvir die byvoeging van vertikaal gesentreerde stringe teks.
.collapse.navbar-collapsevir die groepering en verberging van navigasiebalk-inhoud deur 'n ouer-breekpunt.
Voeg 'n opsioneel .navbar-scrollby om 'n uitgebreide navigasiebalkinhoud te stel max-heighten 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.

html

<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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 ( me-auto, mb-2, mb-lg-0, me-2) nutsklasse.

Handelsmerk

Die .navbar-brandkan 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-brandklas.

html

<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar 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-brandmet 'n <img>.

html

<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" 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-blocken .align-text-topop die <img>.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Nav

Navbar-navigasieskakels bou voort op ons .navopsies 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 .activeklas by .nav-linkom die huidige bladsy aan te dui.

Neem asseblief kennis dat jy ook die aria-currentkenmerk op die aktiewe moet byvoeg .nav-link.

html

<nav class="navbar navbar-expand-lg 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">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.

html

<nav class="navbar navbar-expand-lg 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">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-itemen .nav-linksoos hieronder getoon.

html

<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <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:

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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 .navbargebruik buig uitleg en sal verstek na justify-content: space-between. Gebruik addisionele flex-nutsprogramme soos nodig om hierdie gedrag aan te pas.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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.

html

<nav class="navbar 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.

html

<nav class="navbar 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.

html

<nav class="navbar 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.

html

<nav class="navbar navbar-expand-lg 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

Nuut in v5.2.0: Navbar-tema word nou aangedryf deur CSS-veranderlikes en .navbar-lightis afgekeur. CSS-veranderlikes word toegepas op .navbar, met verstek op die "ligte" voorkoms, en kan met .navbar-dark.

Navbar-temas is makliker as ooit te danke aan Bootstrap se kombinasie van Sass- en CSS-veranderlikes. Die verstek is ons "ligte navigasiebalk" vir gebruik met ligte agtergrondkleure, maar jy kan ook aansoek doen .navbar-darkvir 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" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Houers

Alhoewel dit nie nodig is nie, kan jy 'n navigasiebalk in 'n toevou .containerom dit op 'n bladsy te sentreer – let egter daarop dat 'n binnehouer steeds benodig word. Of jy kan 'n houer in die byvoeg .navbarom slegs die inhoud van 'n vaste of statiese boonste navigasiebalk te sentreer .

html

<div class="container">
  <nav class="navbar navbar-expand-lg 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.

html

<nav class="navbar navbar-expand-lg 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, vasgeplak na bo (blaai saam met die bladsy totdat dit bo bereik, bly dan daar), of vasgeplak na onder (blaai saam met die bladsy totdat dit onder 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-topop die <body>) vereis om oorvleueling met ander elemente te voorkom.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

html

<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

html

<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

html

<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

html

<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Blaai

Voeg .navbar-nav-scrollby '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-heightof 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-xis die ekwivalent van auto, wat 'n mate van horisontale inhoud sal sny.

Hier is 'n voorbeeld navbar wat gebruik maak .navbar-nav-scrollmet style="--bs-scroll-height: 100px;", met 'n paar ekstra marge nutsprogramme vir optimale spasiëring.

html

<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <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">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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-expandklas op die navigasiebalk by. Vir navigasiebalke wat altyd ineenstort, moenie enige .navbar-expandklas 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-brandvertoon by die kleinste breekpunt nie:

html

<nav class="navbar navbar-expand-lg 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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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:

html

<nav class="navbar navbar-expand-lg 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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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:

html

<nav class="navbar navbar-expand-lg 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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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 iden data-bs-targetooreenstem, is dit maklik gedoen!

Ingevoude inhoud

Wisselbaar via die navbar-handelsmerk.

html

<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-controlskenmerk het, wat na die idvan 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.

Offcanvas

Omskep jou uitbreidende en invouende navigasiebalk in 'n offcanvas-laai met die offcanvas-komponent . Ons brei beide die offcanvas-standaardstyle uit en gebruik ons .navbar-expand-*klasse om 'n dinamiese en buigsame navigasie-sybalk te skep.

In die voorbeeld hieronder, om 'n offcanvas navigasiebalk te skep wat altyd ineengevou is oor alle breekpunte, laat die .navbar-expand-*klas heeltemal weg.

html

<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <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>
        </ul>
        <form class="d-flex" role="search">
          <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>
  </div>
</nav>

Om 'n offcanvas navigasiebalk te skep wat uitbrei na 'n normale navigasiebalk by 'n spesifieke breekpunt soos lg, gebruik .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Wanneer u offcanvas in 'n donker navbalk gebruik, moet u daarop let dat u moontlik 'n donker agtergrond op die offcanvas-inhoud moet hê om te verhoed dat die teks onleesbaar word. In die voorbeeld hieronder voeg ons .navbar-darken .bg-darkby die .navbar, .text-bg-darkby die .offcanvas, .dropdown-menu-darktot .dropdown-menuen .btn-close-whitetot .btn-closevir behoorlike stilering met 'n donker offcanvas.

html

<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik navbars nou plaaslike CSS-veranderlikes .navbarvir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, dus word Sass-aanpassing ook steeds ondersteun.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Sommige bykomende CSS veranderlikes is ook teenwoordig op .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Pasmaak deur CSS veranderlikes kan gesien word in die .navbar-darkklas waar ons spesifieke waardes ignoreer sonder om duplikaat CSS keurders by te voeg.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass veranderlikes

Veranderlikes vir alle navigasiebalke:

$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-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;

Veranderlikes vir die donker navigasiebalk :

$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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass lus

Responsiewe navbalk uitbrei/vou-klasse (bv. .navbar-expand-lg) word met die kaart gekombineer $breakpointsen 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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}