Siirry pääsisältöön Siirry dokumenttien navigointiin
Check
in English

Navbar

Dokumentaatio ja esimerkkejä Bootstrapin tehokkaasta, responsiivisesta navigointiotsikosta, navigointipalkista. Sisältää tuen brändäykselle, navigoinnille ja muille, mukaan lukien tuki tiivistyslaajennuksellemme.

Tällä sivulla

Kuinka se toimii

Seuraavassa on mitä sinun tulee tietää ennen kuin aloitat navigointipalkin käytön:

  • Navigointipalkit vaativat kääreen responsiivista kutistamista ja .navbarvä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 tai aria-current="true"joukon nykyistä kohdetta.
  • Uutta v5.2.0:ssa: Navigointipalkkeja voidaan teemailla CSS-muuttujilla, jotka on rajattu perusluokkaan .navbar. .navbar-lighton vanhentunut ja .navbar-darkkirjoitettu uudelleen ohittamaan CSS-muuttujat sen sijaan, että lisäisi tyylejä.
Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

Tuettu sisältö

Navbareissa on sisäänrakennettu tuki kouralliselle osakomponentille. Valitse tarvittaessa seuraavista:

  • .navbar-brandyrityksesi, tuotteesi tai projektisi nimeen.
  • .navbar-navtäyskorkeaa ja kevyttä navigointia varten (mukaan lukien pudotusvalikoiden tuki).
  • .navbar-togglerkäytettäväksi tiivistyslaajennuksen ja muiden navigoinnin vaihtotoimintojemme kanssa .
  • Jousto- ja välitysapuohjelmat kaikille lomakeohjaimille ja -toiminnoille.
  • .navbar-textpystysuoraan keskitettyjen tekstijonojen lisäämiseen.
  • .collapse.navbar-collapsenavigointipalkin sisällön ryhmittelyyn ja piilottamiseen ylätason keskeytyskohdan mukaan.
  • Lisää valinnainen .navbar-scroll, jos haluat määrittää max-heightja 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ä.

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>

Tässä esimerkissä käytetään tausta ( bg-light) ja väli ( me-auto, mb-2, mb-lg-0, me-2) hyödyllisyysluokkia.

Brändi

Voidaan soveltaa useimpiin elementteihin , .navbar-brandmutta ankkuri toimii parhaiten, koska jotkin elementit saattavat vaatia hyödyllisyysluokkia tai mukautettuja tyylejä.

Teksti

Lisää tekstisi elementtiin .navbar-brandluokan kanssa.

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>

Kuva

Voit korvata tekstin .navbar-brandsisällä <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>

Kuva ja teksti

Voit myös käyttää joitain lisäapuohjelmia kuvan ja tekstin lisäämiseen samanaikaisesti. Huomaa lisäys .d-inline-blockja .align-text-top.<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>

Navigointilinkit perustuvat .navvaihtoehtoihimme 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ää .activeluokka .nav-linkosoittamaan nykyinen sivu.

Huomaa, että sinun tulee myös lisätä aria-currentattribuutti aktiiviseen .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>

Ja koska käytämme luokkia naveissamme, voit halutessasi välttää luettelopohjaisen lähestymistavan kokonaan.

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>

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-itemalla .nav-linkkuvatulla tavalla.

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>

Lomakkeet

Sijoita erilaisia ​​lomakesäätimiä ja komponentteja navigointipalkkiin:

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>

Käytön välittömät alielementit .navbarjoustavat asettelun ja ovat oletuksena justify-content: space-between. Käytä tarvittaessa muita joustavia apuohjelmia tämän toiminnan säätämiseen.

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>

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.

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>

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.

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>

Teksti

Navigointipalkit voivat sisältää tekstiä :n avulla .navbar-text. Tämä luokka säätää tekstijonojen pystysuuntausta ja vaakaväliä.

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

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>

Värimallit

Uutta versiossa 5.2.0: Navbar-teemat perustuvat nyt CSS-muuttujiin, ja .navbar-lightse on poistettu käytöstä. CSS-muuttujia käytetään .navbar, oletuksena "kevyt" ulkoasu, ja ne voidaan ohittaa .navbar-dark.

Navigointipalkin teemat ovat helpompia kuin koskaan Bootstrapin Sass- ja CSS-muuttujien yhdistelmän ansiosta. Oletuksena on "vaalea navigointipalkki" käytettäväksi vaaleiden taustavärien kanssa, mutta voit hakea myös .navbar-darktummia taustavärejä. 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" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Säiliöt

Vaikka se ei ole pakollinen, voit kääriä navigointipalkin a -kenttään .containerkeskittääksesi sen sivulle. Huomaa kuitenkin, että sisäsäiliö tarvitaan silti. Tai voit lisätä säiliön sisälle keskittääksesi .navbarvain kiinteän tai staattisen ylänavigointipalkin sisällön .

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>

Käytä mitä tahansa responsiivisista säilöistä muuttaaksesi, kuinka laajasti navigointipalkin sisältö näytetään.

html 
<nav class="navbar navbar-expand-lg 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, kiinnitetty yläosaan (vieritään sivun kanssa, kunnes se saavuttaa yläreunan, sitten pysyy siellä) tai kiinnitetty alaosaan (vieritään sivun mukana, kunnes se saavuttaa alareunan 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.

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>

Vieritys

Lisää .navbar-nav-scroll( .navbar-navtai 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-heighttai 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-xon 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.

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>

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-expandkutistu. Älä lisää .navbar-expandluokkaa 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-brandnäy pienimmässä keskeytyskohdassa:

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>

Kun tuotemerkki näkyy vasemmalla ja vaihtokytkin oikealla:

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>

Vasemmalla kytkin ja oikealla tuotenimi:

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>

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 idja data-bs-targetvastaa, se on helppo tehdä!

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>

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-controlsattribuutti, joka osoittaa idsisä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.

Offcanvas

Muuta laajeneva ja kutistuva navigointipalkki offcanvas-laatikoksi offcanvas-komponentin avulla . Laajennamme sekä offcanvas-oletustyylejä että luomme .navbar-expand-*luokillamme dynaamisen ja joustavan navigointisivupalkin.

Alla olevassa esimerkissä luodaksesi offcanvas-navigointipalkin, joka on aina tiivistetty kaikissa keskeytyspisteissä, ohita .navbar-expand-*luokka kokonaan.

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>

Voit luoda offcanvas-navigointipalkin, joka laajenee tavalliseksi navigointipalkin tietyssä keskeytyskohdassa lg, kuten .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>

Kun käytät offcanvaa tummassa navigointipalkissa, ota huomioon, että offcanvas-sisällössä on ehkä oltava tumma tausta, jotta teksti ei muutu lukukelvottomaksi. Alla olevassa esimerkissä lisäämme .navbar-darkja -merkkiin , , , ja .bg-darkto oikeaan muotoiluun tummalla offcanvasilla..navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

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

Muuttujat

Lisätty versioon 5.2.0

Osana Bootstrapin kehittyvää CSS-muuttujien lähestymistapaa navigointipalkit käyttävät nyt paikallisia CSS-muuttujia .navbartehostaakseen reaaliaikaista räätälöintiä. CSS-muuttujien arvot asetetaan Sassin kautta, joten myös Sass-räätälöinti on edelleen tuettu.

  --#{$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};

Joitakin muita CSS-muuttujia on myös .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);

Räätälöinti CSS-muuttujien avulla voidaan nähdä .navbar-darkluokassa, jossa ohitamme tietyt arvot lisäämättä päällekkäisiä CSS-valitsimia.

  --#{$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 muuttujat

Kaikkien navigointipalkkien 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-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;

Tumman navigointipalkin muuttujat :

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

Responsiiviset navigointipalkin laajennus-/tiivistysluokat (esim. .navbar-expand-lg) yhdistetään $breakpointskarttaan 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: 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;
          }
        }
      }
    }
  }
}