Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
Check
in English

Navbaro

Dokumentado kaj ekzemploj por la potenca, respondema navigadokapo de Bootstrap, la navbar. Inkluzivas subtenon por markado, navigado kaj pli, inkluzive de subteno por nia kolapsa kromaĵo.

Sur ĉi tiu paĝo

Kiel ĝi funkcias

Jen kion vi bezonas scii antaŭ komenci kun la navigadbreto:

  • Navbaroj postulas envolvadon .navbarkun .navbar-expand{-sm|-md|-lg|-xl|-xxl}por respondemaj kolapsaj kaj kolorskemoj klasoj.
  • Navbaroj kaj ilia enhavo estas fluaj defaŭlte. Ŝanĝu la ujon por limigi ilian horizontalan larĝon en malsamaj manieroj.
  • Uzu niajn interspacigajn kaj fleksajn utilajn klasojn por kontroli interspacon kaj vicigon ene de navbaroj.
  • Navbaroj estas respondemaj defaŭlte, sed vi povas facile modifi ilin por ŝanĝi tion. Respondema konduto dependas de nia Kolapsa JavaScript-kromaĵo.
  • Certigu alireblecon uzante <nav>elementon aŭ, se vi uzas pli senmarkan elementon kiel ekzemple <div>, aldonu a role="navigation"al ĉiu navbar por eksplicite identigi ĝin kiel grava regiono por uzantoj de helpaj teknologioj.
  • Indiku la nunan objekton uzante aria-current="page"por la nuna paĝo aŭ aria-current="true"por la nuna ero en aro.
  • Nova en v5.2.0: Navbaroj povas esti temeitaj kun CSS-variabloj kiuj estas ampleksitaj al la .navbarbaza klaso. .navbar-lightestis malrekomendita kaj .navbar-darkestis reverkita por anstataŭi CSS-variablojn anstataŭ aldoni pliajn stilojn.
La animacia efiko de ĉi tiu komponanto dependas de la prefers-reduced-motionamaskomunikila demando. Vidu la sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .

Subtena enhavo

Navbars venas kun enkonstruita subteno por manpleno da subkomponentoj. Elektu el la jenaj laŭbezone:

  • .navbar-brandpor via kompanio, produkto aŭ projektonomo.
  • .navbar-navpor plenalta kaj malpeza navigado (inkluzive de subteno por falmenuoj).
  • .navbar-togglerpor uzo kun nia kolapsa kromaĵo kaj aliaj navigaciaj ŝanĝantaj kondutoj.
  • Fleksaj kaj interspacaj utilecoj por ajnaj formularaj kontroloj kaj agoj.
  • .navbar-textpor aldoni vertikale centritajn ĉenojn de teksto.
  • .collapse.navbar-collapsepor grupigi kaj kaŝi navbar enhavon per gepatra rompopunkto.
  • Aldonu laŭvolan .navbar-scrollpor agordi max-heightkaj rulumi vastigitan navbaran enhavon .

Jen ekzemplo de ĉiuj subkomponentoj inkluzivitaj en respondema lumtema navbaro, kiu aŭtomate kolapsas ĉe la lg(granda) rompopunkto.

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>

Ĉi tiu ekzemplo uzas fonajn ( bg-light) kaj interspacigajn ( me-auto, mb-2, mb-lg-0, me-2) utilajn klasojn.

Marko

La .navbar-brandpovas esti aplikata al la plej multaj elementoj, sed ankro plej bone funkcias, ĉar iuj elementoj eble postulos utilajn klasojn aŭ kutimajn stilojn.

Teksto

Aldonu vian tekston ene de elemento kun la .navbar-brandklaso.

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>

Bildo

Vi povas anstataŭigi la tekston ene de la .navbar-brandper <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>

Bildo kaj teksto

Vi ankaŭ povas uzi kelkajn pliajn ilojn por aldoni bildon kaj tekston samtempe. Notu la aldonon de .d-inline-blockkaj .align-text-topsur la <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>

Navbar-navigadaj ligiloj baziĝas sur niaj .navopcioj kun sia propra modifklaso kaj postulas la uzon de baskulimaj klasoj por taŭga respondema stilo. Navigado en navbaroj ankaŭ kreskos por okupi tiom da horizontala spaco kiel eble por konservi vian navbar-enhavon sekure vicigita.

Aldonu la .activeklason .nav-linkpor indiki la nunan paĝon.

Bonvolu noti, ke vi ankaŭ devus aldoni la aria-currentatributon sur la aktiva .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>

Kaj ĉar ni uzas klasojn por niaj navigacioj, vi povas tute eviti la list-bazitan aliron, se vi ŝatas.

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>

Vi ankaŭ povas uzi falmenuojn en via navigadbreto. Falmenuoj postulas envolvan elementon por poziciigado, do nepre uzu apartajn kaj nestitajn elementojn por .nav-itemkaj .nav-linkkiel montrite sube.

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>

Formoj

Metu diversajn formularajn kontrolojn kaj komponentojn ene de navbar:

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>

Tujaj infanaj elementoj de .navbaruzo fleksas aranĝon kaj defaŭlte al justify-content: space-between. Uzu pliajn flekseblajn ilojn laŭbezone por ĝustigi ĉi tiun konduton.

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>

Ankaŭ enigogrupoj funkcias. Se via navigadbreto estas tuta formo, aŭ plejparte formo, vi povas uzi la <form>elementon kiel la ujo kaj konservi iom da HTML.

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>

Ankaŭ diversaj butonoj estas subtenataj kiel parto de ĉi tiuj navbarformularoj. Ĉi tio ankaŭ estas bonega rememorigilo, ke vertikalaj vicigiloj povas esti uzataj por vicigi malsamajn grandajn elementojn.

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>

Teksto

Navbaroj povas enhavi pecetojn da teksto helpe de .navbar-text. Ĉi tiu klaso ĝustigas vertikalan vicigon kaj horizontalan interspacon por tekstoĉenoj.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Miksu kaj kongruu kun aliaj komponantoj kaj utilecoj laŭbezone.

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>

Koloraj skemoj

Nova en v5.2.0: Navbar-temo nun funkcias per CSS-variabloj kaj .navbar-lightestis malrekomendita. CSS-variabloj estas aplikataj al .navbar, defaŭlte al la "malpeza" aspekto, kaj povas esti anstataŭitaj per .navbar-dark.

Navbar-temoj estas pli facilaj ol iam ajn danke al la kombinaĵo de Bootstrap de Sass kaj CSS-variabloj. La defaŭlta estas nia "luma navbar" por uzo kun helaj fonkoloroj, sed vi ankaŭ povas peti .navbar-darkmalhelajn fonkolorojn. Poste, agordu per .bg-*utilecoj.

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

Ujoj

Kvankam ĝi ne estas postulata, vi povas envolvi navbaron en .containerpor centri ĝin sur paĝo-kvankam notu, ke interna ujo ankoraŭ necesas. Aŭ vi povas aldoni ujon en la .navbarpor nur centri la enhavon de fiksa aŭ senmova supra navbaro .

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>

Uzu iun el la respondemaj ujoj por ŝanĝi kiom larĝa estas prezentita la enhavo en via navbaro.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Lokigo

Uzu niajn poziciajn utilecojn por meti navbarojn en ne-statikajn poziciojn. Elektu el fiksita al la supro, fiksita al la malsupro, algluita al la supro (rolumas kun la paĝo ĝis ĝi atingas la supron, tiam restas tie), aŭ algluita al la malsupro (rulas kun la paĝo ĝis ĝi atingas la malsupron, tiam restas). tie).

Fiksaj navbaroj uzas position: fixed, signifante ke ili estas tiritaj de la normala fluo de la DOM kaj povas postuli kutiman CSS (ekz., padding-topsur la <body>) por malhelpi interkovron kun aliaj elementoj.

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>

Rulumado

Aldonu .navbar-nav-scrollal .navbar-nav(aŭ alia navdrinksubkomponento) por ebligi vertikalan movadon ene de la ŝanĝebla enhavo de kolapsita navigadbreto. Defaŭlte, movo ekfunkcias je 75vh(aŭ 75% de la alteco de la vidfenestro), sed vi povas superregi tion per la loka CSS-propra propraĵo --bs-navbar-heightaŭ kutimaj stiloj. Ĉe pli grandaj vidfenestroj kiam la navigadbreto estas vastigita, enhavo aperos kiel ĝi aperas en defaŭlta navigadbreto.

Bonvolu noti, ke ĉi tiu konduto venas kun ebla malavantaĝo de overflow—kiam agordo overflow-y: auto(necesa por rulumi la enhavon ĉi tie), overflow-xestas la ekvivalento de auto, kiu tranĉos iom da horizontala enhavo.

Jen ekzemplo navbar uzanta .navbar-nav-scrollkun style="--bs-scroll-height: 100px;", kun kelkaj kromaj marĝenaj utilecoj por optimuma interspaco.

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>

Respondema kondutoj

Navbars povas uzi.navbar-toggler , .navbar-collapse, kaj .navbar-expand{-sm|-md|-lg|-xl|-xxl}klasojn por determini kiam ilia enhavo kolapsas malantaŭ butono. Kombine kun aliaj utilecoj, vi povas facile elekti kiam montri aŭ kaŝi apartajn elementojn.

Por navbaroj kiuj neniam kolapsas, aldonu la.navbar-expand klason sur la navbar. Por navbaroj kiuj ĉiam kolapsas, ne aldonu ajnan .navbar-expandklason.

Toggler

Navbar-ŝanĝiloj estas maldekstre vicigitaj defaŭlte, sed ĉu ili sekvu fratan elementon kiel a.navbar-brand , ili aŭtomate viciĝos maldekstre. Inversigi vian markadon inversigos la lokigon de la baskulo. Malsupre estas ekzemploj de malsamaj baskulimaj stiloj.

Sen .navbar-brandmontrita ĉe la plej malgranda rompopunkto:

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 markonomo montrita maldekstre kaj baskulo dekstre:

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>

Kun baskulo maldekstre kaj markonomo dekstre:

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>

Ekstera enhavo

Kelkfoje vi volas uzi la kolapsan kromaĵon por ekigi kontenerlementon por enhavo kiu strukture sidas ekster la .navbar. Ĉar nia kromaĵo funkcias sur la idkaj data-bs-targetkongruo, tio estas facile farita!

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>

Kiam vi faras tion, ni rekomendas inkluzivi plian JavaScript por movi la fokuson programe al la ujo kiam ĝi estas malfermita. Alie, klavaruzantoj kaj uzantoj de helpaj teknologioj verŝajne malfacile trovos la lastatempe malkaŝitan enhavon - precipe se la ujo kiu estis malfermita venas antaŭ la baskulo en la strukturo de la dokumento. Ni ankaŭ rekomendas certigi, ke la baskulo havas la aria-controlsatributon, indikante la idde la enhavujo. En teorio, ĉi tio permesas al uzantoj de helpteknologioj salti rekte de la baskulo al la ujo, kiun ĝi regas, sed subteno por ĉi tio estas nuntempe sufiĉe neregula.

Eksterkanvaso

Transformu vian vastiĝantan kaj kolapantan navbaron en eksterkanvasan tirkeston per la eksterkanvasa komponanto . Ni etendas ambaŭ la defaŭltajn stilojn de eksterkanvaso kaj uzas niajn .navbar-expand-*klasojn por krei dinamikan kaj flekseblan navigan flankmenuon.

En la malsupra ekzemplo, por krei eksterkanvasan navigadbreton, kiu ĉiam estas kolapsita tra ĉiuj rompopunktoj, .navbar-expand-*tute preterlasu la klason.

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>

Por krei eksterkanvasan navigadbreton kiu disetendiĝas al normala navigadbreto ĉe specifa rompopunkto kiel lg, uzu .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>

Kiam vi uzas offcanvas en malhela navigadbreto, konsciu, ke vi eble bezonos havi malhelan fonon sur la eksterkanvas enhavo por eviti ke la teksto fariĝu nelegebla. En la malsupra ekzemplo, ni aldonas .navbar-darkkaj .bg-darkal la .navbar, .text-bg-darkal la .offcanvas, .dropdown-menu-darkal .dropdown-menu, kaj .btn-close-whiteal .btn-closepor taŭga stilo kun malhela eksterkanvaso.

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

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro de evoluantaj CSS-variabloj de Bootstrap, navbaroj nun uzas lokajn CSS .navbar-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

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

Kelkaj kromaj CSS-variabloj ankaŭ ĉeestas sur .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);

Personigo per CSS-variabloj videblas sur la .navbar-darkklaso, kie ni superregas specifajn valorojn sen aldoni duplikatajn CSS-elektilojn.

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

Variabloj por ĉiuj navbaroj:

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

Variabloj por la malhela navbaro :

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

Respondema navbar ekspansiiĝi/kolapsi klasoj (ekz., .navbar-expand-lg) estas kombinitaj kun la $breakpointsmapo kaj generitaj per buklo en 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;
          }
        }
      }
    }
  }
}