in English

Navigbar

Dokumentācija un piemēri Bootstrap jaudīgajai, atsaucīgajai navigācijas galvenei, navigācijas joslai. Ietver atbalstu zīmola veidošanai, navigācijai, sakļaut spraudni un daudz ko citu.

Kā tas strādā

Lūk, kas jums jāzina pirms darba sākšanas ar navigācijas joslu:

  • Navigācijas joslām ir nepieciešams iesaiņojums .navbarar .navbar-expand{-sm|-md|-lg|-xl}, lai pielāgotu sabrukšanas un krāsu shēmu klases.
  • Navigācijas joslas un to saturs pēc noklusējuma ir mainīgi. Izmantojiet papildu konteinerus , lai ierobežotu to horizontālo platumu.
  • Izmantojiet mūsu atstarpes un elastīgās lietderības klases, lai kontrolētu atstarpi un līdzinājumu navigācijas joslās.
  • Navigācijas joslas pēc noklusējuma ir atsaucīgas, taču varat tās viegli modificēt, lai to mainītu. Reakcijas darbība ir atkarīga no mūsu Collapse JavaScript spraudņa.
  • Drukāšanas laikā navigācijas joslas pēc noklusējuma ir paslēptas. Piespiediet tos drukāt, .d-printpievienojot .navbar. Skatiet displeja lietderības klasi.
  • Nodrošiniet pieejamību, izmantojot <nav>elementu, vai, ja izmantojat vispārīgāku elementu, piemēram, <div>, pievienojiet role="navigation"katrai navigācijas joslai, lai to skaidri identificētu kā orientieri palīgtehnoloģiju lietotājiem.
Šī komponenta animācijas efekts ir atkarīgs no prefers-reduced-motionmultivides vaicājuma. Skatiet mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .

Atbalstīts saturs

Navigbars ir aprīkots ar iebūvētu atbalstu nedaudzām apakškomponentiem. Pēc vajadzības izvēlieties kādu no šīm iespējām:

  • .navbar-brandjūsu uzņēmuma, produkta vai projekta nosaukumam.
  • .navbar-navpilna augstuma un vieglai navigācijai (ieskaitot atbalstu nolaižamajām izvēlnēm).
  • .navbar-togglerizmantošanai ar mūsu sakļautības spraudni un citām navigācijas pārslēgšanas darbībām.
  • .form-inlinejebkura veida vadīklām un darbībām.
  • .navbar-textvertikāli centrētu teksta virkņu pievienošanai.
  • .collapse.navbar-collapsenavigācijas joslas satura grupēšanai un slēpšanai pēc vecāka pārtraukuma punkta.

Šis ir visu apakškomponentu piemērs, kas iekļauts adaptīvā gaismas tematikas navigācijas joslā, kas automātiski sakļaujas lg(lielajā) pārtraukuma punktā.

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

Šajā piemērā tiek izmantotas krāsu ( bg-light) un atstarpju ( my-2, my-lg-0, mr-sm-0, my-sm-0) lietderības klases.

Zīmols

.navbar-brandVar lietot lielākajai daļai elementu, taču vislabāk darbojas enkurs, jo dažiem elementiem var būt nepieciešamas utilīta klases vai pielāgoti stili .

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

Lai pievienotu attēlus, .navbar-brandvienmēr būs nepieciešami pielāgoti stili vai utilītas, lai tie būtu pareizi izmēri. Šeit ir daži piemēri, ko demonstrēt.

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

Navigācijas joslas navigācijas saites ir balstītas uz mūsu .navopcijām ar savām modifikācijas klasēm, un tām ir jāizmanto pārslēgšanas klases , lai nodrošinātu pareizu atsaucību. Navigācija navigācijas joslās arī palielināsies, lai aizņemtu pēc iespējas vairāk horizontālās vietas, lai jūsu navigācijas joslas saturs būtu droši saskaņots.

Aktīvie stāvokļi — ar .active— lai norādītu, ka pašreizējo lapu var lietot tieši .nav-links vai to tiešajiem vecākiem .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>

Un, tā kā mēs izmantojam klases mūsu navigācijas sistēmām, jūs varat pilnībā izvairīties no uz sarakstu balstītas pieejas, ja vēlaties.

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

Varat arī izmantot nolaižamās izvēlnes navigācijas joslā. Nolaižamajām izvēlnēm pozicionēšanai ir nepieciešams iesaiņojuma elements, tāpēc noteikti izmantojiet atsevišķus un ligzdotus elementus, .nav-itemkā .nav-linkparādīts tālāk.

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

Veidlapas

Novietojiet dažādas veidlapas vadīklas un komponentus navigācijas joslā ar .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>

Tūlītējie pakārtotie elementi, kas tiek .navbarizmantoti elastīgā izkārtojumā, un pēc noklusējuma tiks izmantoti justify-content: space-between. Ja nepieciešams, izmantojiet papildu elastīgās utilītas , lai pielāgotu šo darbību.

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

Darbojas arī ievades grupas:

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

Šajās navigācijas joslas formās tiek atbalstītas arī dažādas pogas. Tas ir arī lielisks atgādinājums, ka vertikālās izlīdzināšanas utilītas var izmantot dažādu izmēru elementu līdzināšanai.

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

Teksts

Navigācijas joslās var būt teksta fragmenti, izmantojot .navbar-text. Šī klase pielāgo teksta virkņu vertikālo līdzinājumu un horizontālo atstarpi.

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

Ja nepieciešams, sajauciet un saskaņojiet ar citiem komponentiem un utilītprogrammām.

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

Krāsu shēmas

Navigācijas joslas tēmu veidošana nekad nav bijusi vienkāršāka, pateicoties tematisko klašu un background-colorutilītu kombinācijai. Izvēlieties kādu no .navbar-lightlietošanai ar gaišām fona krāsām vai .navbar-darktumšām fona krāsām. Pēc tam pielāgojiet, izmantojot .bg-*utilītas.

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

Konteineri

Lai gan tas nav obligāti, jūs varat ietīt navigācijas joslu, .containerlai centrētu to lapā. Vai arī varat pievienot konteineru iekšpusē, .navbarlai centrētu tikai fiksētas vai statiskas augšējās navigācijas joslas saturu .

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

Kad konteiners atrodas navigācijas joslā, tā horizontālais polsterējums tiek noņemts pārtraukuma punktos, kas ir zemāki par jūsu norādīto .navbar-expand{-sm|-md|-lg|-xl}klasi. Tas nodrošina, ka, kad navigācijas josla ir sakļauta, mēs nevajadzīgi nepalielināsim polsterējumu apakšējās skata vietās.

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

Izvietojums

Izmantojiet mūsu pozīciju utilītas , lai novietotu navigācijas joslas nestatiskās pozīcijās. Izvēlieties fiksētu uz augšu, fiksētu uz leju vai pielīmētu augšpusē (ritina ar lapu, līdz tā sasniedz augšdaļu, pēc tam paliek tur). Fiksētās navigācijas joslas izmanto position: fixed, kas nozīmē, ka tās tiek izņemtas no parastās DOM plūsmas, un tām var būt nepieciešams pielāgots CSS (piemēram, padding-topuz <body>), lai novērstu pārklāšanos ar citiem elementiem.

Ņemiet vērā arī to, ka .sticky-toplietojumi position: sticky, kas netiek pilnībā atbalstīti katrā pārlūkprogrammā .

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

Ritināšana

Pievienojiet .navbar-nav-scrollkādam .navbar-collapse(vai citam navigācijas joslas apakškomponentam), lai iespējotu vertikālo ritināšanu sakļautās navigācijas joslas pārslēdzamajā saturā. Pēc noklusējuma ritināšana sākas 75vh(vai 75% no skata loga augstuma), taču varat to ignorēt, izmantojot iekļautos vai pielāgotos stilus. Lielākos skatu laukos, kad navigācijas josla ir izvērsta, saturs tiks parādīts tāpat kā noklusējuma navigācijas joslā.

Lūdzu, ņemiet vērā, ka šādai darbībai ir potenciāls trūkums: overflowiestatījums overflow-y: auto(šeit ir nepieciešams, lai ritinātu saturu) overflow-xir līdzvērtīgs auto, kas apgriež daļu horizontālā satura.

Šeit ir piemērs navigācijas joslai, kurā tiek izmantots , .navbar-nav-scrollar style="max-height: 100px;"dažām papildu piemales utilītprogrammām optimālai atstarpei.

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

Atsaucīga uzvedība

Navigācijas joslas var izmantot .navbar-toggler, .navbar-collapseun .navbar-expand{-sm|-md|-lg|-xl}klases, lai noteiktu, kad to saturs sakļaujas aiz pogas. Kombinācijā ar citām utilītprogrammām varat viegli izvēlēties, kad rādīt vai slēpt konkrētus elementus.

Navigācijas joslām, kas nekad nesakļaujas, pievienojiet .navbar-expandklasi navigācijas joslā. Navigācijas joslām, kas vienmēr sakļaujas, nepievienojiet nevienu .navbar-expandklasi.

Pārslēdzējs

Navigācijas joslas pārslēgi ​​pēc noklusējuma ir līdzināti pa kreisi, taču, ja tie seko kādam brālim, piemēram .navbar-brand, , tie tiks automātiski līdzināti pa labi. Mainot marķējumu, tiks mainīts pārslēgšanas slēdža izvietojums. Tālāk ir sniegti dažādu pārslēgšanas stilu piemēri.

Netiek .navbar-brandrādīts mazākajā pārtraukuma punktā:

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

Kreisajā pusē ir redzams zīmola nosaukums un labajā pusē ir pārslēdzējs:

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

Ar pārslēdzēju kreisajā pusē un zīmola nosaukumu labajā pusē:

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

Ārējais saturs

Dažkārt vēlaties izmantot sakukšanas spraudni, lai aktivizētu konteinera elementu saturam, kas strukturāli atrodas ārpus .navbar. Tā kā mūsu spraudnis darbojas uz idun data-targetatbilst, tas ir viegli izdarāms!

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

Kad to darāt, ieteicams iekļaut papildu JavaScript, lai programmatiski pārvietotu fokusu uz konteineru, kad tas tiek atvērts. Pretējā gadījumā tastatūras lietotājiem un palīgtehnoloģiju lietotājiem, visticamāk, būs grūti atrast tikko atklāto saturu, jo īpaši, ja atvērtais konteiners atrodas pirms pārslēdzēja dokumenta struktūrā. Ieteicams arī pārliecināties, vai pārslēdzējam ir aria-controlsatribūts, kas norāda uz idsatura konteinera atribūtu. Teorētiski tas ļauj palīgtehnoloģiju lietotājiem pāriet tieši no pārslēga uz konteineru, ko tas kontrolē, taču pašlaik atbalsts tam ir diezgan neviendabīgs.