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 ir kt. palaikymą, įskaitant sutraukimo papildinio 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“ .

Perskaitykite pavyzdį ir palaikomų sudedamųjų dalių sąrašą.

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="#" 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>

Š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.5/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="" loading="lazy">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
    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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Taip pat galite naudoti išskleidžiamuosius meniu naršymo juostoje. 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="#" 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>

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 elementai .navbarnaudojami lanksčiu išdėstymu 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, galite apvynioti naršymo juostą, kad .containerją centre būtų puslapyje, arba pridėti naršymo juostą, kad 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ėje padėtyje. Pasirinkite fiksuotą į 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 pasirinktinio 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>

Atsakingas elgesys

Naršymo juostos gali naudoti .navbar-toggler, .navbar-collapseir .navbar-expand{-sm|-md|-lg|-xl}klases, kad pakeistų, kai jų turinys sutraukiamas 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.

Be .navbar-brandžemiausio lūžio taško:

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

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

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" 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šorinis turinys

Kartais norite naudoti sutraukimo papildinį, kad suaktyvintumėte paslėptą turinį kitose puslapio vietose. Kadangi mūsų papildinys veikia idir data-targetatitinka, tai padaryti nesunku!

Sutrauktas turinys

Perjungiama naudojant navigacijos 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>