in English

Navbar

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

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 .

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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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.6/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.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</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">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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Můžete také použí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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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 .navbarpoužívají flexibilní 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

Ačkoli to není povinné, můžete navigační panel zabalit do a .containera vycentrovat ho na stránku. Nebo můžete přidat kontejner dovnitř .navbara pouze vycentrovat obsah 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>

Posouvání

Přidejte .navbar-nav-scrolldo .navbar-collapse(nebo jiné dílčí komponenty navbar) a povolte vertikální posouvání v přepínatelném obsahu sbaleného navigačního panelu. Ve výchozím nastavení se posouvání spustí na 75vh(nebo 75 % výšky výřezu), ale můžete to přepsat pomocí vložených nebo vlastních stylů. Ve větších výřezech, když je navigační lišta rozbalená, se obsah zobrazí jako ve výchozí navigační liště.

Vezměte prosím na vědomí, že toto chování přichází s potenciální nevýhodou overflow— když nastavení overflow-y: auto(vyžadováno k posouvání obsahu zde), overflow-xje ekvivalentem auto, které ořízne část horizontálního obsahu.

Zde je příklad použití navigační lišty .navbar-nav-scrolls style="max-height: 100px;", s několika doplňkovými nástroji pro okraje pro optimální rozestupy.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Responzivní chování

Navbary mohou používat třídy .navbar-toggler, .navbar-collapsea .navbar-expand{-sm|-md|-lg|-xl}k určení, 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í na nejmenším zarážkovém bodu:

<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">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">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">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 sbalení ke spuštění prvku kontejneru pro obsah, který strukturálně leží mimo soubor .navbar. Protože náš plugin funguje na ida data-targetpárování, je to snadné!

<div class="fixed-top">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

Když to uděláte, doporučujeme zahrnout další JavaScript, aby se fokus programově přesunul do kontejneru při jeho otevření. V opačném případě budou mít uživatelé klávesnice a uživatelé asistenčních technologií pravděpodobně potíže s nalezením nově odhaleného obsahu – zvláště pokud kontejner, který byl otevřen, bude ve struktuře dokumentu předcházet přepínači. Doporučujeme také ujistit se, že přepínač má aria-controlsatribut, který ukazuje na idkontejner obsahu. Teoreticky to uživatelům asistenčních technologií umožňuje skočit přímo z přepínače do kontejneru, který ovládá – ale podpora pro toto je v současné době značně nejednotná.