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 un citam, tostarp atbalstam mūsu sabrukšanas spraudnim.

Šajā lapā

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|-xxl}, lai pielāgotu sabrukšanas un krāsu shēmu klases.
Navigācijas joslas un to saturs pēc noklusējuma ir mainīgi. Mainiet konteineru , lai dažādos veidos 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.
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.
Norādiet pašreizējo vienumu, izmantojot aria-current="page"pašreizējo lapu vai aria-current="true"pašreizējo komplekta vienumu.
Jaunums versijā 5.2.0: Navigācijas joslas var būt motīvas ar CSS mainīgajiem, kas ir ietverti .navbarbāzes klasē. .navbar-lightir novecojis un .navbar-darkir pārrakstīts, lai ignorētu CSS mainīgos, nevis pievienotu papildu stilus.

Šī 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ītais saturs

Navigbars ir aprīkots ar iebūvētu atbalstu nedaudzām apakškomponentiem. Ja nepieciešams, 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.
Elastības un atstarpju utilītas jebkuras formas 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.
Pievienojiet neobligātu .navbar-scroll, lai iestatītu max-heightun ritinātu izvērsto navigācijas joslas saturu .

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

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>

Šajā piemērā tiek izmantotas fona ( bg-light) un atstarpes ( me-auto, mb-2, mb-lg-0, me-2) 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 lietderības klases vai pielāgoti stili .

Teksts

Pievienojiet tekstu elementam kopā ar .navbar-brandklasi.

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>

Attēls

Jūs varat aizstāt tekstu iekšpusē .navbar-brandar <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>

Attēls un teksts

Varat arī izmantot dažas papildu utilītas, lai vienlaikus pievienotu attēlu un tekstu. Ņemiet vērā pievienošanu .d-inline-blockun .align-text-topuz <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>

Nav

Navigācijas joslas navigācijas saites ir balstītas uz mūsu .navopcijām ar savu modifikatoru klasi, 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.

Pievienojiet .activeklasi, .nav-linklai norādītu pašreizējo lapu.

Lūdzu, ņemiet vērā, ka atribūts jāpievieno arī aria-currentaktīvajam .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>

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

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>

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.

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>

Veidlapas

Ievietojiet dažādas veidlapas vadīklas un komponentus navigācijas joslā:

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>

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.

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>

Darbojas arī ievades grupas. Ja navigācijas josla ir visa veidlapa vai galvenokārt veidlapa, varat izmantot šo <form>elementu kā konteineru un saglabāt daļu 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>

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

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>

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.

html

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

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

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>

Krāsu shēmas

Jaunums versijā 5.2.0: Navigbar tēma tagad tiek nodrošināta ar CSS mainīgajiem, un .navbar-lighttā darbība ir novecojusi. CSS mainīgie tiek lietoti .navbar, pēc noklusējuma ir “viegls”, un tos var ignorēt, izmantojot .navbar-dark.

Navigācijas joslas motīvi ir vienkāršāki nekā jebkad agrāk, pateicoties Bootstrap Sass un CSS mainīgo kombinācijai. Noklusējums ir mūsu “gaišā navigācijas josla”, kas paredzēta lietošanai ar gaišām fona krāsām, taču varat pieteikties .navbar-darkarī tumšā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" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Konteineri

Lai gan tas nav nepieciešams, varat ietīt navigācijas joslu, .containerlai to centrētu lapā, taču ņemiet vērā, ka iekšējais konteiners joprojām ir nepieciešams. Vai arī varat pievienot konteineru iekšpusē, .navbarlai centrētu tikai fiksētas vai statiskas augšējās navigācijas joslas saturu .

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>

Izmantojiet jebkuru no adaptīvajiem konteineriem, lai mainītu navigācijas joslas satura attēlojuma platumu.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <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 apakšā, pielīmētu augšpusē (ritina ar lapu, līdz tā sasniedz augšdaļu, pēc tam paliek tur) vai pielīmētu līdz apakšai (ritina ar lapu, līdz tā sasniedz apakš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.

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>

Ritināšana

Pievienojiet (vai .navbar-nav-scrollcitam .navbar-navnavigā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 tiek aktivizēta 75vh(vai 75% no skata loga augstuma), taču jūs varat to ignorēt, izmantojot vietējo CSS pielāgoto rekvizītu --bs-navbar-heightvai 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="--bs-scroll-height: 100px;"dažām papildu piemales utilītprogrammām optimālai atstarpei.

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>

Atsaucīga uzvedība

Navigācijas joslas var izmantot .navbar-toggler, .navbar-collapseun .navbar-expand{-sm|-md|-lg|-xl|-xxl}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ā:

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>

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

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>

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

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>

Ā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-bs-targetatbilst, tas ir viegli izdarāms!

Collapsed content

Toggleable via the navbar brand.

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>

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 — it ī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.

Offcanvas

Pārveidojiet savu izvēršamo un sakļaujamo navigācijas joslu par offcanvas atvilktni, izmantojot offcanvas komponentu . Mēs paplašinām gan offcanvas noklusējuma stilus, gan izmantojam mūsu .navbar-expand-*klases, lai izveidotu dinamisku un elastīgu navigācijas sānjoslu.

Tālāk esošajā piemērā, lai izveidotu ārpus kanvas navigācijas joslu, kas vienmēr ir sakļauta visos pārtraukuma punktos, .navbar-expand-*pilnībā izlaidiet klasi.

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>

Lai izveidotu offcanvas navigācijas joslu, kas izvēršas par parastu navigācijas joslu noteiktā pārtraukuma punktā, piemēram lg, izmantojiet .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>

Izmantojot offcanvas tumšā navigācijas joslā, ņemiet vērā, ka var būt nepieciešams tumšs fons ārpus kanvas saturam, lai teksts nekļūtu nesalasāms. Tālāk esošajā piemērā mēs pievienojam .navbar-darkun .bg-darkpie .navbar, .text-bg-darkpie .offcanvas, .dropdown-menu-darkuz .dropdown-menuun to, .btn-close-whitelai .btn-closenodrošinātu pareizu stilu ar tumšu audeklu.

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

Mainīgie

Pievienots v5.2.0

Kā daļu no Bootstrap attīstošās CSS mainīgo pieejas navigācijas joslās tagad tiek izmantoti vietējie CSS mainīgie, .navbarlai uzlabotu reāllaika pielāgošanu. CSS mainīgo vērtības tiek iestatītas, izmantojot Sass, tāpēc joprojām tiek atbalstīta arī Sass pielāgošana.

  --#{$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};

Daži papildu CSS mainīgie ir pieejami arī vietnē .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);

Pielāgošanu, izmantojot CSS mainīgos, var redzēt .navbar-darkklasē, kurā mēs ignorējam noteiktas vērtības, nepievienojot dublētus CSS atlasītājus.

  --#{$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 mainīgie

Visu navigācijas joslu mainīgie:

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

Tumšās navigācijas joslas mainīgie :

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

Adaptīvās navigācijas joslas izvēršanas/saukšanas klases (piem., .navbar-expand-lg) tiek apvienotas ar $breakpointskarti un ģenerētas, izmantojot cilpu 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;
          }
        }
      }
    }
  }
}