Source

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.

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

Legu plu por ekzemplo kaj listo de subtenataj subkomponentoj.

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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#" tabindex="-1" aria-disabled="true">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 povus postuli 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.4/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.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</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" href="#" tabindex="-1" aria-disabled="true">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Vi ankaŭ povas uzi falmenuojn en via navbar nav. 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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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 infanoj elementoj en .navbaruzo fleksa aranĝo 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ĝo aŭ aldoni unu ene por nur centri la enhavon de fiksa aŭ senmova supra navbar .

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

Respondema kondutoj

Navbaroj povas uzi .navbar-toggler, .navbar-collapse, kaj .navbar-expand{-sm|-md|-lg|-xl}klasojn por ŝanĝi 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.

Kun neniu .navbar-brandmontrita en plej malsupra 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 kaŝitan enhavon aliloke sur la paĝo. Ĉar nia kromaĵo funkcias sur la idkaj data-targetkongruo, tio estas facile farita!

<div class="pos-f-t">
  <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>