Navigacijos juosta

„Bootstrap“ galingos, reaguojančios naršymo antraštės – naršymo juostos – dokumentacija ir pavyzdžiai. Apima prekės ženklo kūrimo, naršymo, sutraukimo papildinio ir kt. palaikymą.

Kaip tai veikia

Štai ką reikia žinoti prieš pradėdami naudoti naršymo juostą:

Navigacijos juostoms reikalingas įvyniojimas .navbar, kad būtų galima greitai sutraukti .navbar-expand{-sm|-md|-lg|-xl}ir spalvų schemą .
Naršymo juostos ir jų turinys pagal numatytuosius nustatymus yra sklandūs. Naudokite pasirenkamus konteinerius , kad apribotumėte jų horizontalų plotį.
Norėdami valdyti tarpą ir lygiavimą naršymo juostose, naudokite mūsų tarpų ir lankstumo naudingumo klases.
Naršymo juostos pagal numatytuosius nustatymus reaguoja, tačiau galite lengvai jas pakeisti, kad tai pakeistumėte. Reagavimo elgsena priklauso nuo mūsų Collapse JavaScript papildinio.
Spausdinant naršymo juostos pagal numatytuosius nustatymus yra paslėptos. Priverskite juos spausdinti pridėdami .d-printprie .navbar. Peržiūrėkite ekrano naudingumo klasę.
Užtikrinkite prieinamumą naudodami <nav>elementą arba, jei naudojate bendresnį elementą, pvz., <div>, pridėkite a role="navigation"prie kiekvienos naršymo juostos, kad aiškiai identifikuotumėte ją kaip orientyrą pagalbinių technologijų naudotojams.

Šio komponento animacijos efektas priklauso nuo prefers-reduced-motionmedijos užklausos. Žr . mūsų pritaikymo neįgaliesiems dokumentacijos skyrių „Sumažintas judėjimas“ .

Palaikomas turinys

Navigacijos juostose yra įmontuotas kelių papildomų komponentų palaikymas. Jei reikia, pasirinkite iš šių:

.navbar-brandjūsų įmonės, produkto ar projekto pavadinimo.
.navbar-navviso aukščio ir lengvo svorio navigacijai (įskaitant išskleidžiamųjų meniu palaikymą).
.navbar-togglerskirtas naudoti su mūsų sutraukimo papildiniu ir kitais naršymo perjungimo veiksmais.
.form-inlinebet kokiam formos valdymui ir veiksmams.
.navbar-textvertikaliai centruotoms teksto eilutėms pridėti.
.collapse.navbar-collapsegrupuoti ir paslėpti naršymo juostos turinį pagal pirminį lūžio tašką.

Pateikiame visų antrinių komponentų, įtrauktų į jautrią šviesos temos naršymo juostą, kuri automatiškai susitraukia ties lg(didelė) pertraukos taške, pavyzdys.

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

Šiame pavyzdyje naudojamos spalvų ( bg-light) ir tarpų ( my-2, my-lg-0, mr-sm-0, my-sm-0) naudingumo klasės.

Prekės ženklas

Galima .navbar-brandpritaikyti daugeliui elementų, tačiau geriausiai veikia inkaras, nes kai kuriems elementams gali prireikti naudingumo klasių arba pasirinktinių 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>

Norint pridėti vaizdus, .navbar-brandtikėtina, kad visada reikės pasirinktinių stilių ar paslaugų, kad būtų tinkamai pritaikytas dydis. Štai keletas pavyzdžių, kuriuos reikia parodyti.

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

Naršymo juostos naršymo nuorodos remiasi mūsų .navparinktimis su savo modifikavimo klase ir reikalauja naudoti perjungimo klases , kad būtų tinkamai reaguojama. Naršymas naršymo juostose taip pat padidės, kad užimtų kuo daugiau horizontalios vietos, kad naršymo juostos turinys būtų saugiai suderintas.

Aktyvios būsenos – su .active– nurodančios, kad dabartinis puslapis gali būti taikomas tiesiogiai .nav-links arba jų tiesioginiams tėvams .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>

Ir kadangi savo navigacijoje naudojame klases, galite visiškai išvengti sąrašu pagrįsto metodo, jei norite.

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

Taip pat naršymo juostoje galite naudoti išskleidžiamuosius meniu. Išskleidžiamajame meniu reikalingas apvyniojimo elementas, kad būtų galima nustatyti padėtį, todėl būtinai naudokite atskirus ir įdėtus elementus, skirtus .nav-itemir .nav-linkkaip parodyta toliau.

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

Formos

Įdėkite įvairius formos valdiklius ir komponentus naršymo juostoje naudodami .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>

Neatidėliotini antriniai .navbarnaudojimo lankstaus išdėstymo elementai ir pagal numatytuosius nustatymus bus justify-content: space-between. Jei reikia, naudokite papildomas lanksčias priemones , kad sureguliuotumėte šį elgesį.

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

Taip pat veikia įvesties grupės:

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

Įvairūs mygtukai taip pat palaikomi kaip šių naršymo juostos formų dalis. Tai taip pat puikus priminimas, kad vertikalaus lygiavimo priemonės gali būti naudojamos skirtingų dydžių elementams sulygiuoti.

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

Tekstas

Naršymo juostose gali būti teksto fragmentų naudojant .navbar-text. Ši klasė koreguoja vertikalų lygiavimą ir horizontalų tarpą teksto eilutėms.

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

Jei reikia, sumaišykite ir suderinkite su kitais komponentais ir komunalinėmis priemonėmis.

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

Spalvų schemos

Sukurti naršymo juostos temas dar niekada nebuvo taip paprasta dėl teminių klasių ir background-colorpaslaugų derinio. Pasirinkite iš .navbar-lightšviesių fono spalvų arba .navbar-darktamsių fono spalvų. Tada tinkinkite naudodami .bg-*komunalines paslaugas.

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

Konteineriai

Nors tai nebūtina, naršymo juostą galite apvynioti į a, .containerkad ji būtų puslapio centre. Arba galite pridėti talpyklą viduje, .navbarkad centre būtų tik fiksuotos arba statinės viršutinės naršymo juostos turinys .

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

Kai sudėtinis rodinys yra naršymo juostoje, jo horizontalus užpildas pašalinamas žemesnėse nei nurodytos .navbar-expand{-sm|-md|-lg|-xl}klasės pertraukos taškuose. Tai užtikrina, kad be reikalo nepadauginsime užpildymo apatinėse peržiūros srityse, kai naršymo juosta sutraukta.

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

Įdėjimas

Naudokite mūsų padėties įrankius , kad nustatytumėte naršymo juostas į nestatinę padėtį. Pasirinkite iš fiksuoto į viršų, pritvirtintą prie apačios arba priklijuotą prie viršaus (slenka su puslapiu, kol pasiekia viršų, tada ten lieka). Fiksuotose naršymo juostose naudojama position: fixed, tai reiškia, kad jos paimamos iš įprasto DOM srauto ir gali prireikti tinkinto CSS (pvz., padding-top) <body>, kad būtų išvengta persidengimo su kitais elementais.

Taip pat atminkite, kad .sticky-topnaudoja position: sticky, kuri nėra visiškai palaikoma visose naršyklėse .

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

Slinkimas

Pridėkite .navbar-nav-scrollprie .navbar-collapse(ar kito naršymo juostos antrinio komponento), kad įgalintumėte vertikalų slinkimą perjungiamame sutrauktos naršymo juostos turinyje. Pagal numatytuosius nustatymus slinkimas pradedamas esant 75vh(arba 75 % peržiūros srities aukščio), tačiau galite tai nepaisyti naudodami įterptuosius arba pasirinktinius stilius. Didesnėse peržiūros srityse, kai naršymo juosta išskleista, turinys bus rodomas taip, kaip ir numatytojoje naršymo juostoje.

Atkreipkite dėmesį, kad toks elgesys turi galimą trūkumą – overflowkai nustatymas overflow-y: auto(būtinas norint slinkti čia) overflow-xyra lygiavertis auto, kuris apkarpys tam tikrą horizontalų turinį.

Štai pavyzdys, kaip naršymo juosta naudojama .navbar-nav-scrollsu style="max-height: 100px;", su kai kuriomis papildomomis paraštės programomis, kad būtų optimalus tarpas.

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

Atsakingas elgesys

Naršymo juostos gali naudoti .navbar-toggler, .navbar-collapseir .navbar-expand{-sm|-md|-lg|-xl}klases, kad nustatytų, kada jų turinys susitraukia už mygtuko. Kartu su kitomis programomis galite lengvai pasirinkti, kada rodyti arba slėpti tam tikrus elementus.

Jei naršymo juostos niekada nesutraukia, pridėkite .navbar-expandklasę naršymo juostoje. Prie naršymo juostų, kurios visada sutraukiamos, nepridėkite jokios .navbar-expandklasės.

Perjungiklis

Naršymo juostos perjungikliai pagal numatytuosius nustatymus yra sulygiuoti kairėje, bet jei jie seka brolio elementą, pvz. .navbar-brand, , jie bus automatiškai sulygiuoti į dešinę. Jei pakeisite žymėjimą, perjungiklio vieta bus pakeista. Žemiau pateikiami skirtingų perjungimo stilių pavyzdžiai.

Nerodoma .navbar-brandmažiausioje pertraukos taške:

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

Kairėje rodomas prekės pavadinimas, o dešinėje – perjungiklis:

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

Su perjungikliu kairėje ir prekės pavadinimu dešinėje:

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

Išorinis turinys

Kartais norite naudoti sutraukimo papildinį, kad suaktyvintumėte sudėtinio rodinio elementą turiniui, kuris struktūriškai yra už .navbar. Kadangi mūsų papildinys veikia idir data-targetatitinka, tai padaryti nesunku!

Sutrauktas turinys

Perjungiama naudojant naršymo juostos prekės ženklą.

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

Kai tai padarysite, rekomenduojame įtraukti papildomą „JavaScript“, kad būtų programiškai perkeltas dėmesys į konteinerį, kai jis atidaromas. Priešingu atveju klaviatūros ir pagalbinių technologijų naudotojams greičiausiai bus sunku rasti naujai atskleistą turinį – ypač jei atidarytas konteineris yra prieš perjungiklį dokumento struktūroje. Taip pat rekomenduojame įsitikinti, kad perjungiklis turi aria-controlsatributą, nukreipiantį į idturinio sudėtinio rodinio atributą. Teoriškai tai leidžia pagalbinių technologijų naudotojams pereiti tiesiai iš perjungiklio į jo valdomą talpyklą, tačiau šiuo metu tai yra gana nevienoda.