Source

Navbar

Dokumentace a příklady pro výkonnou a citlivou navigační hlavičku Bootstrap, navbar. Zahrnuje podporu pro branding, navigaci a další, včetně podpory pro náš plugin pro sbalení.

Jak to funguje

Zde je to, co potřebujete vědět, než začnete s navigační lištou:

Navbary vyžadují obtékání .navbarpro .navbar-expand{-sm|-md|-lg|-xl}responzivní sbalení a třídy barevných schémat .
Navigační panely a jejich obsah jsou ve výchozím nastavení plynulé. Použijte volitelné kontejnery k omezení jejich vodorovné šířky.
Použijte naše třídy rozteče a flex pro řízení rozteče a zarovnání v navigačních lištách.
Navigační panely jsou ve výchozím nastavení responzivní, ale můžete je snadno upravit, abyste to změnili. Responzivní chování závisí na našem pluginu Collapse JavaScript.
Navigační panely jsou při tisku ve výchozím nastavení skryté. Vynutíte jejich tisk přidáním .d-printdo souboru .navbar. Viz třída obslužných programů zobrazení .
Zajistěte dostupnost pomocí <nav>prvku nebo, pokud používáte obecnější prvek, jako je <div>, přidejte role="navigation"na každý navigační panel a, abyste jej explicitně označili jako orientační oblast pro uživatele asistenčních technologií.

Efekt animace této komponenty závisí na prefers-reduced-motiondotazu na média. Podívejte se na část s omezeným pohybem v naší dokumentaci přístupnosti .

Čtěte dále pro příklad a seznam podporovaných dílčích komponent.

Podporovaný obsah

Navbary jsou dodávány s vestavěnou podporou pro několik dílčích komponent. Podle potřeby vyberte z následujících:

.navbar-brandpro název vaší společnosti, produktu nebo projektu.
.navbar-navpro plnou výšku a lehkou navigaci (včetně podpory rozevíracích seznamů).
.navbar-togglerpro použití s naším zásuvným modulem pro sbalení a dalšími způsoby přepínání navigace .
.form-inlinepro jakékoli ovládací prvky a akce formuláře.
.navbar-textpro přidávání svisle centrovaných řetězců textu.
.collapse.navbar-collapsepro seskupení a skrytí obsahu navigační lišty pomocí nadřazeného bodu přerušení.

Zde je příklad všech dílčích součástí obsažených v responzivním navigačním panelu se světelnou tématikou, který se automaticky sbalí na lg(velkém) bodu přerušení.

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

Tento příklad používá pomocné třídy color ( bg-light) a mezery ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Značka

.navbar-brandLze použít na většinu prvků, ale kotva funguje nejlépe, protože některé prvky mohou vyžadovat pomocné třídy nebo vlastní styly .

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

Přidání obrázků do .navbar-brandbude pravděpodobně vždy vyžadovat vlastní styly nebo nástroje pro správnou velikost. Zde je několik příkladů k demonstraci.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/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.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

Navigační odkazy Navbar staví na našich .navmožnostech s vlastní třídou modifikátorů a vyžadují použití přepínacích tříd pro správný responzivní styl. Navigace v navigačních lištách se také rozroste, aby zabírala co nejvíce horizontálního prostoru, aby byl obsah navigační lišty bezpečně zarovnán.

Aktivní stavy – s .active– k označení aktuální stránky lze použít přímo na .nav-links nebo jejich bezprostřední nadřazené .nav-items.

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

A protože pro naše navigace používáme třídy, můžete se zcela vyhnout přístupu založenému na seznamech, pokud 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Můžete také využít rozevírací seznamy v navigační liště. Rozbalovací nabídky vyžadují pro umístění obtékací prvek, takže se ujistěte, že používáte samostatné a vnořené prvky pro .nav-itema .nav-linkjak je uvedeno níže.

<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áře

Umístěte různé ovládací prvky formuláře a komponenty na navigační panel pomocí .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é podřízené prvky při .navbarpoužití flexibilního rozvržení a výchozí nastavení bude justify-content: space-between. K úpravě tohoto chování použijte podle potřeby další 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 vstupů fungují také:

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

Součástí těchto formulářů navigační lišty jsou také různá tlačítka. To je také skvělá připomínka, že nástroje pro vertikální zarovnání lze použít k zarovnání prvků různých velikostí.

<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 mohou obsahovat kousky textu s pomocí .navbar-text. Tato třída upravuje svislé zarovnání a vodorovné mezery pro řetězce textu.

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

Podle potřeby smíchejte a spojte s dalšími součástmi a nástroji.

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

Barevná schémata

Motivování navbaru nebylo nikdy jednodušší díky kombinaci tříd motivů a background-colorutilit. Vyberte si .navbar-lightpro použití se světlými barvami pozadí nebo .navbar-darkpro tmavé barvy pozadí. Poté upravte pomocí .bg-*nástrojů.

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

Kontejnery

I když to není povinné, můžete zalomit navigační panel do a .containervycentrovat jej na stránku nebo přidat jeden do středu pouze obsahu pevného nebo statického horního navigačního panelu .

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

Když je kontejner ve vaší navigační liště, jeho vodorovné odsazení se odstraní v bodech přerušení nižších, než je zadaná .navbar-expand{-sm|-md|-lg|-xl}třída. To zajišťuje, že při sbaleném navigačním panelu zbytečně nezdvojnásobujeme výplň v nižších výřezech.

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

Umístění

Použijte naše nástroje pro umístění k umístění navigačních panelů do nestatických pozic. Vyberte si z možností pevně nahoru, pevně dolů nebo přilepených nahoru (posouvá se stránkou, dokud nedosáhne horní části, pak tam zůstane). Opravené navigační panely používají position: fixed, což znamená, že jsou vytaženy z normálního toku DOM a mohou vyžadovat vlastní CSS (např. padding-topna <body>), aby se zabránilo překrývání s jinými prvky.

Všimněte si také, že .sticky-toppoužívá position: sticky, které není plně podporováno ve všech prohlížečích .

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

Responzivní chování

Navigační panely mohou využívat třídy .navbar-toggler, .navbar-collapsea .navbar-expand{-sm|-md|-lg|-xl}ke změně, když se jejich obsah sbalí za tlačítko. V kombinaci s dalšími utilitami si můžete snadno vybrat, kdy chcete jednotlivé prvky zobrazit nebo skrýt.

U navbarů, které se nikdy nesbalí, přidejte .navbar-expandtřídu na navbar. U navigačních panelů, které se vždy sbalí, nepřidávejte žádnou .navbar-expandtřídu.

Přepínač

Přepínače navigační lišty jsou ve výchozím nastavení zarovnány doleva, ale pokud následují za sourozeneckým prvkem, jako je .navbar-brand, budou automaticky zarovnány zcela vpravo. Obrácením označení změníte umístění přepínače. Níže jsou uvedeny příklady různých stylů přepínání.

Bez .navbar-brandzobrazení v nejnižším bodě přerušení:

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

S názvem značky vlevo a přepínačem 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="#" 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>

S přepínačem vlevo a názvem 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="#" 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>

Externí obsah

Někdy chcete použít plugin pro sbalení ke spuštění skrytého obsahu jinde na stránce. Protože náš plugin funguje na ida data-targetpárování, je to snadné!

Collapsed content

Toggleable via the navbar brand.

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