in English

Navbaro

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

Kiel ĝi funkcias

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

Navbaroj postulas envolvadon .navbarkun .navbar-expand{-sm|-md|-lg|-xl}por respondemaj kolapsaj kaj kolorskemoj klasoj.
Navbaroj kaj ilia enhavo estas fluaj defaŭlte. Uzu laŭvolajn ujojn por limigi ilian horizontalan larĝon.
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.
Navbaroj estas kaŝitaj defaŭlte dum presado. Devigu ilin esti presitaj aldonante .d-printal la .navbar. Vidu la montran utilecan klason.
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.

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.
.form-inlinepor ajna formo kontroloj kaj agoj.
.navbar-textpor aldoni vertikale centritajn ĉenojn de teksto.
.collapse.navbar-collapsepor grupigi kaj kaŝi navbar enhavon per gepatra rompopunkto.

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Ĉi tiu ekzemplo uzas kolorajn ( bg-light) kaj interspacigajn ( my-2, my-lg-0, mr-sm-0, my-sm-0) 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.

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

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Aldoni bildojn al la .navbar-brandvolo verŝajne ĉiam postulas kutimajn stilojn aŭ ilojn por taŭge grandeco. Jen kelkaj ekzemploj por pruvi.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

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.

Aktivaj statoj—kun .active—por indiki la nunan paĝon povas esti aplikataj rekte al .nav-links aŭ iliaj tujaj gepatroj .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </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.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Formoj

Metu diversajn formularajn kontrolojn kaj komponantojn ene de navbar kun .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</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.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Enirgrupoj ankaŭ funkcias:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" 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 ĉenoj de teksto.

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

Koloraj skemoj

Temigi la navbaron neniam estis pli facila danke al la kombinaĵo de temaj klasoj kaj background-colorutilecoj. Elektu el .navbar-lightpor uzo kun helaj fonkoloroj, aŭ .navbar-darkpor malhelaj fonkoloroj. 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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Ujoj

Kvankam ĝi ne estas postulata, vi povas envolvi navbaron en .containerpor centri ĝin sur paĝon. Aŭ vi povas aldoni ujon en la .navbarpor nur centri la enhavon de fiksa aŭ senmova supra navbaro .

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

Kiam la ujo estas ene de via navigadbreto, ĝia horizontala kompletigo estas forigita ĉe rompopunktoj pli malaltaj ol via specifita .navbar-expand{-sm|-md|-lg|-xl}klaso. Ĉi tio certigas, ke ni ne duobligas la plenigadon nenecese sur pli malaltaj vidfenestroj kiam via navigadbreto estas kolapsigita.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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, aŭ algluita al la supro (rulumas kun la paĝo ĝis ĝi atingas la supron, 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.

Ankaŭ rimarku, ke .sticky-topuzas position: sticky, kiu ne estas plene subtenata en ĉiu retumilo .

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

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

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

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

Rulumado

Aldonu .navbar-nav-scrollal .navbar-collapse(aŭ alia navdrinksubkomponento) por ebligi vertikalan movadon ene de la ŝanĝebla enhavo de kolapsita navigadbreto. Defaŭlte, movo ekas je 75vh(aŭ 75% de la alteco de la vidfenestro), sed vi povas superregi tion per enliniaj aŭ 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="max-height: 100px;", kun kelkaj kromaj marĝenaj utilecoj por optimuma interspaco.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Respondema kondutoj

Navbaroj povas uzi .navbar-toggler, .navbar-collapse, kaj .navbar-expand{-sm|-md|-lg|-xl}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-expandklason sur la navbar. Por navbaroj kiuj ĉiam kolapsas, ne aldonu ajnan .navbar-expandklason.

Toggler

Navbar-ŝanĝiloj estas maldekstre vicigitaj defaŭlte, sed se ili sekvas gefratan elementon kiel .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:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Kun markonomo montrita maldekstre kaj baskulo dekstre:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Kun baskulo maldekstre kaj markonomo dekstre:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </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-targetkongruo, tio estas facile farita!

Kolapsa enhavo

Ŝaltebla per la navbar-marko.

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

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.