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í
.navbar
pro.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-print
do 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řidejterole="navigation"
na každý navigační panel a, abyste jej explicitně označili jako orientační oblast pro uživatele asistenčních technologií.
prefers-reduced-motion
dotazu 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-brand
pro název vaší společnosti, produktu nebo projektu..navbar-nav
pro plnou výšku a lehkou navigaci (včetně podpory rozevíracích seznamů)..navbar-toggler
pro použití s naším zásuvným modulem pro sbalení a dalšími způsoby přepínání navigace ..form-inline
pro jakékoli ovládací prvky a akce formuláře..navbar-text
pro přidávání svisle centrovaných řetězců textu..collapse.navbar-collapse
pro 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-brand
Lze 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-brand
bude 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>
Nav
Navigační odkazy Navbar staví na našich .nav
mož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-link
s nebo jejich bezprostřední nadřazené .nav-item
s.
<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-item
a .nav-link
jak 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 .navbar
použí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-color
utilit. Vyberte si .navbar-light
pro použití se světlými barvami pozadí nebo .navbar-dark
pro 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 .container
a vycentrovat ho na stránku. Nebo můžete přidat kontejner dovnitř .navbar
a 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-top
na <body>
), aby se zabránilo překrývání s jinými prvky.
Všimněte si také, že .sticky-top
použí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-scroll
do .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-x
je ekvivalentem auto
, které ořízne část horizontálního obsahu.
Zde je příklad použití navigační lišty .navbar-nav-scroll
s 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-collapse
a .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-expand
třídu na navbar. U navigačních panelů, které se vždy sbalí, nepřidávejte žádnou .navbar-expand
tří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-brand
zobrazení 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 id
a data-target
pá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-controls
atribut, který ukazuje na id
kontejner 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á.