Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

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

Šiame puslapyje

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|-xxl}ir spalvų schemą .
  • Naršymo juostos ir jų turinys pagal numatytuosius nustatymus yra sklandūs. Pakeiskite konteinerį , kad įvairiais būdais 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.
  • 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.
  • Nurodykite esamą elementą naudodami aria-current="page"dabartiniam puslapiui arba aria-current="true"dabartiniam rinkinio elementui.
  • Naujiena 5.2.0 versijoje: naršymo juostos gali būti teminės su CSS kintamaisiais, kurių taikymo sritis yra .navbarpagrindinė klasė. .navbar-lightbuvo nebenaudojamas ir .navbar-darkbuvo perrašytas, kad nepaisytų CSS kintamųjų, o ne pridėtų papildomų stilių.
Š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.
  • Lankstumo ir tarpų naudojimo priemonės bet kokiems formos valdikliams 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ą.
  • Pridėkite pasirenkamą .navbar-scroll, kad nustatytumėte max-heightir slinktumėte išplėstos naršymo juostos turinį .

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

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Šiame pavyzdyje naudojamos fono ( bg-light) ir tarpų ( me-auto, mb-2, mb-lg-0, me-2) 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ų.

Tekstas

Pridėkite tekstą elemente su .navbar-brandklase.

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

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

Vaizdas

Galite pakeisti .navbar-brandtekstą <img>.

html 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

Vaizdas ir tekstas

Taip pat galite naudoti keletą papildomų paslaugų, kad vienu metu pridėtumėte vaizdą ir tekstą. Atkreipkite dėmesį į pridėjimą .d-inline-blockir .align-text-topant <img>.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</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.

Pridėkite .activeklasę, .nav-linkkad nurodytumėte dabartinį puslapį.

Atkreipkite dėmesį, kad atributą taip pat turėtumėte pridėti aria-currentprie aktyvaus .nav-link.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </div>
</nav>

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

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </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.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown 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><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Formos

Naršymo juostoje įdėkite įvairius formos valdiklius ir komponentus:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</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į.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Taip pat veikia įvesties grupės. Jei naršymo juosta yra visa forma arba dažniausiai forma, galite naudoti <form>elementą kaip konteinerį ir išsaugoti šiek tiek HTML.

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

html 
<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" 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.

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

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

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </div>
</nav>

Spalvų schemos

Naujiena 5.2.0 versijoje: Navigacijos juostos temą dabar palaiko CSS kintamieji ir .navbar-lightjis nebenaudojamas. CSS kintamieji taikomi .navbar, pagal nutylėjimą „lengva“ išvaizda ir gali būti nepaisyti naudojant .navbar-dark.

Navigacijos juostos temos yra paprastesnės nei bet kada anksčiau dėl „Bootstrap“ Sass ir CSS kintamųjų derinio. Numatytoji parinktis yra „šviesi naršymo juosta“, skirta naudoti su šviesiomis fono spalvomis, tačiau galite taikyti .navbar-darkir tamsias fono spalvas. 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" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Konteineriai

Nors tai nebūtina, naršymo juostą galite apvynioti a, .containerkad ji būtų centre, tačiau atminkite, kad vidinis konteineris vis tiek reikalingas. Arba galite pridėti talpyklą viduje, .navbarkad centre būtų tik fiksuotos arba statinės viršutinės naršymo juostos turinys .

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

Naudokite bet kurį iš interaktyvių konteinerių, kad pakeistumėte naršymo juostos turinio pateikimo platumą.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <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, priklijuotą prie viršaus (slenka su puslapiu, kol pasiekia viršų, tada lieka ten) arba priklijuotą prie apačios (slenka su puslapiu, kol pasiekia apačią, tada lieka ten).

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.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Slinkimas

Pridėkite .navbar-nav-scrollprie .navbar-nav(ar kito naršymo juostos antrinio komponento), kad įgalintumėte vertikalų slinkimą perjungiamu sutrauktos naršymo juostos turiniu. Pagal numatytuosius nustatymus slinkimas pradedamas esant 75vh(arba 75 % peržiūros srities aukščio), tačiau galite tai nepaisyti naudodami vietinę CSS tinkintą ypatybę --bs-navbar-heightarba 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="--bs-scroll-height: 100px;", su kai kuriomis papildomomis paraštės programomis, užtikrinančiomis optimalų tarpą.

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

Atsakingas elgesys

Naršymo juostos gali naudoti .navbar-toggler, .navbar-collapseir .navbar-expand{-sm|-md|-lg|-xl|-xxl}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:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </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-bs-targetatitinka, tai padaryti nesunku!

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

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.

Offcanvas

Paverskite besiplečiančią ir susitraukiančią naršymo juostą į offcanvas stalčių naudodami offcanvas komponentą . Išplečiame abu numatytuosius offcanvas stilius ir naudojame savo .navbar-expand-*klases, kad sukurtume dinamišką ir lanksčią naršymo šoninę juostą.

Toliau pateiktame pavyzdyje norėdami sukurti nedrobinę naršymo juostą, kuri visada sutraukta visuose lūžio taškuose, .navbar-expand-*visiškai praleiskite klasę.

html 
<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </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>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

Norėdami sukurti nedrobinę naršymo juostą, kuri tam tikroje pertraukos vietoje išsiplečia į įprastą naršymo juostą lg, naudokite .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Naudodami „offcanvas“ tamsioje naršymo juostoje, atminkite, kad gali prireikti tamsaus „offcanvas“ turinio fono, kad tekstas netaptų neįskaitomas. Toliau pateiktame pavyzdyje pridedame .navbar-darkir .bg-darkprie .navbar, .text-bg-dark, .offcanvas, ir , .dropdown-menu-darkkad būtų sukurtas tinkamas stilius su tamsia drobe..dropdown-menu.btn-close-white.btn-close

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, naršymo juostose dabar naudojami vietiniai CSS kintamieji, .navbarkad būtų galima patobulinti tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Kai kurie papildomi CSS kintamieji taip pat yra .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Tinkinimas naudojant CSS kintamuosius gali būti matomas .navbar-darkklasėje, kurioje nepaisome konkrečių reikšmių nepridėdami pasikartojančių CSS parinktuvų.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass kintamieji

Visų naršymo juostų kintamieji:

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

Tamsios naršymo juostos kintamieji :

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass kilpa

Interaktyvios naršymo juostos išplėtimo / sutraukimo klasės (pvz., .navbar-expand-lg) sujungiamos su $breakpointsžemėlapiu ir generuojamos naudojant kilpą scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}