Source

Navbar

Dokumentácia a príklady výkonnej a citlivej navigačnej hlavičky Bootstrap, navigačnej lišty. Zahŕňa podporu pre branding, navigáciu a ďalšie, vrátane podpory pre náš plugin na zbalenie.

Ako to funguje

Tu je to, čo potrebujete vedieť predtým, ako začnete používať navigačný panel:

Navbary vyžadujú zalomenie .navbars .navbar-expand{-sm|-md|-lg|-xl}pre responzívne zbalenie a triedy farebnej schémy .
Navigačné panely a ich obsah sú v predvolenom nastavení plynulé. Použite voliteľné kontajnery na obmedzenie ich horizontálnej šírky.
Na ovládanie rozstupov a zarovnania v rámci navigačných panelov použite naše triedy rozstupov a flex .
Navigačné panely sú v predvolenom nastavení responzívne, ale môžete ich ľahko upraviť, aby ste to zmenili. Responzívne správanie závisí od nášho doplnku Collapse JavaScript.
Navigačné lišty sú pri tlači štandardne skryté. Vynútiť ich vytlačenie pridaním .d-printdo súboru .navbar. Pozrite si pomocnú triedu zobrazenia .
Zabezpečte dostupnosť pomocou <nav>prvku alebo, ak používate všeobecnejší prvok, ako napríklad <div>, pridajte a role="navigation"na každý navigačný panel, aby ste ho explicitne identifikovali ako orientačný región pre používateľov asistenčných technológií.

Čítajte ďalej, kde nájdete príklad a zoznam podporovaných podkomponentov.

Podporovaný obsah

Navigačné panely sa dodávajú so vstavanou podporou pre niekoľko podsúčiastok. Podľa potreby si vyberte z nasledujúcich možností:

.navbar-brandpre názov vašej spoločnosti, produktu alebo projektu.
.navbar-navpre plnú výšku a ľahkú navigáciu (vrátane podpory rozbaľovacích zoznamov).
.navbar-togglerna použitie s naším zásuvným modulom pre zbalenie a inými spôsobmi prepínania navigácie .
.form-inlinepre akékoľvek ovládacie prvky formulárov a akcie.
.navbar-textna pridávanie vertikálne centrovaných reťazcov textu.
.collapse.navbar-collapsena zoskupenie a skrytie obsahu navigačnej lišty pomocou nadradeného bodu prerušenia.

Tu je príklad všetkých čiastkových komponentov zahrnutých v responzívnom navigačnom paneli so svetlou tematikou, ktorý sa automaticky zbalí na lg(veľkom) bode zlomu.

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

Tento príklad používa pomocné triedy farba ( bg-light) a medzery ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Značka

Dá .navbar-brandsa použiť na väčšinu prvkov, ale kotva funguje najlepšie, pretože niektoré prvky môžu vyžadovať pomocné triedy alebo vlastné štýly.

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

Pridanie obrázkov do .navbar-brandbude pravdepodobne vždy vyžadovať vlastné štýly alebo nástroje na správnu veľkosť. Tu je niekoľko príkladov na demonštráciu.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

Navigačné odkazy na navigačnom paneli stavajú na našich .navmožnostiach s vlastnou triedou modifikátorov a vyžadujú použitie tried prepínačov pre správny responzívny štýl. Navigácia v navigačných paneloch sa tiež rozšíri, aby zaberala čo najviac horizontálneho priestoru, aby bol obsah navigačnej lišty bezpečne zarovnaný.

Aktívne stavy – s .active– na označenie aktuálnej stránky možno použiť priamo na .nav-links alebo ich bezprostredných rodičov .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="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

A pretože používame triedy pre naše navigačné zariadenia, môžete sa úplne vyhnúť prístupu založenému na zoznamoch, ak chcete.

<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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

Môžete tiež použiť rozbaľovacie ponuky v navigačnom paneli. Rozbaľovacie ponuky vyžadujú obalový prvok na umiestnenie, takže sa uistite, že používate samostatné a vnorené prvky pre .nav-itema .nav-linkako je uvedené nižšie.

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

Formuláre

Umiestnite rôzne ovládacie prvky formulárov a komponenty do navigačnej lišty pomocou .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>

Okamžité detské prvky .navbarpoužívajú flexibilné rozloženie a budú predvolene nastavené na justify-content: between. Na úpravu tohto správania použite podľa potreby ďalšie nástroje Flex .

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

Skupiny vstupov fungujú tiež:

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

Ako súčasť týchto formulárov navigačnej lišty sú podporované aj rôzne tlačidlá. Je to tiež skvelá pripomienka, že nástroje na vertikálne zarovnanie možno použiť na zarovnanie prvkov rôznych veľkostí.

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

Text

Navigačné lišty môžu obsahovať kúsky textu s pomocou .navbar-text. Táto trieda upravuje vertikálne zarovnanie a horizontálne medzery pre reťazce textu.

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

Miešajte a kombinujte s ostatnými komponentmi a pomôckami podľa potreby.

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

Farebné schémy

Motivovanie navigačného panela nebolo nikdy jednoduchšie vďaka kombinácii tried tematických tried a background-colorpomôcok. Vyberte si .navbar-lightpre použitie so svetlými farbami pozadia alebo .navbar-darkpre tmavé farby pozadia. Potom prispôsobte pomocou .bg-*nástrojov.

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

Kontajnery

Aj keď to nie je povinné, môžete zalomiť navigačný panel do a .containera vycentrovať ho tak na stránku, alebo ho pridať do stredu iba obsahu pevného alebo statického horného navigačného panela .

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

Keď sa kontajner nachádza vo vašej navigačnej lište, jeho horizontálna výplň sa odstráni v bodoch prerušenia nižších, ako je zadaná .navbar-expand{-sm|-md|-lg|-xl}trieda. To zaisťuje, že pri zbalenom navigačnom paneli zbytočne nezdvojnásobujeme výplň v nižších výrezoch.

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

Umiestnenie

Použite naše nástroje na umiestnenie na umiestnenie navigačných panelov do nestatických pozícií. Vyberte si z možností pevne navrchu, pripevniť na spodok alebo nalepiť navrch (posúva so stránkou, kým nedosiahne vrch, potom tam zostane). Pevné navigačné panely používajú position: fixed, čo znamená, že sú vytiahnuté z normálneho toku DOM a môžu vyžadovať vlastný CSS (napr. padding-topna <body>), aby sa zabránilo prekrývaniu s inými prvkami.

Upozorňujeme tiež, že .sticky-toppoužíva position: sticky, ktorý nie je plne podporovaný v každom prehliadači .

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

Responzívne správanie

Navigačné panely môžu využívať triedy .navbar-toggler, .navbar-collapse, a .navbar-expand{-sm|-md|-lg|-xl}na zmenu, keď sa ich obsah zbalí za tlačidlo. V kombinácii s inými pomôckami si môžete jednoducho vybrať, kedy sa majú jednotlivé prvky zobraziť alebo skryť.

Pre navigačné lišty, ktoré sa nikdy nezrútia, pridajte .navbar-expandtriedu na navigačnú lištu. Pre navigačné panely, ktoré sa vždy zrútia, nepridávajte žiadnu .navbar-expandtriedu.

Prepínač

Prepínače navigačnej lišty sú v predvolenom nastavení zarovnané doľava, ale ak budú nasledovať po súrodeneckom prvku, ako je .navbar-brand, budú automaticky zarovnané úplne vpravo. Obrátením značky zmeníte umiestnenie prepínača. Nižšie sú uvedené príklady rôznych štýlov prepínania.

Bez .navbar-brandzobrazenia v najnižšom bode zlomu:

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

S názvom značky vľavo a prepínačom vpravo:

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

S prepínačom vľavo a názvom značky vpravo:

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

Externý obsah

Niekedy chcete použiť doplnok na zbalenie na spustenie skrytého obsahu inde na stránke. Pretože náš doplnok funguje na priraďovaní ida data-targetporovnávaní, je to jednoduché!

Zbalený obsah

Prepínateľné cez značku navigačnej lišty.

<div class="pos-f-t">
  <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>