Navigační lišta Bootstrap 4
Navigační lišty
Navigační lišta je navigační záhlaví, které je umístěno v horní části stránky:
Základní navigační lišta
Pomocí Bootstrapu se může navigační panel roztáhnout nebo sbalit v závislosti na velikosti obrazovky.
S touto třídou je vytvořen standardní navigační panel .navbar
, po kterém následuje responzivní sbalovací třída: .navbar-expand-xl|lg|md|sm
(skládá navigační panel svisle na extra velké, velké, střední nebo malé obrazovky).
Chcete-li přidat odkazy na navigační panel, použijte <ul>prvek s class="navbar-nav". Poté přidejte <li>prvky s .nav-itemtřídou následované <a>prvkem s .nav-linktřídou:
Příklad
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Vertikální navigační lišta
Odeberte .navbar-expand-xl|lg|md|smtřídu a vytvořte svislý navigační panel:
Příklad
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Středová navigační lišta
Přidejte .justify-content-centertřídu do středu navigačního panelu.
Následující příklad vycentruje navigační panel na střední, velké a extra velké obrazovce. Na malých obrazovkách bude zobrazen svisle a zarovnán doleva (kvůli třídě .navbar-expand-sm):
Příklad
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Barevný navigační panel
Pomocí kterékoli z .bg-colortříd změňte barvu pozadí navigačního panelu ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondarya ).bg-dark.bg-light
Tip: Přidejte bílou barvu textu ke všem odkazům na navigační liště s .navbar-darktřídou nebo použijte .navbar-lighttřídu k přidání
černé barvy textu.
Příklad
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</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>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Aktivní/deaktivovaný stav : Přidejte .activetřídu do
<a>prvku, abyste zvýraznili aktuální odkaz, nebo .disabledtřídu, abyste označili, že na odkaz nelze kliknout.
Značka / Logo
Třída .navbar-brandse používá ke zvýraznění názvu značky/loga/projektu vaší stránky:
Příklad
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Při použití .navbar-brandtřídy na obrázcích Bootstrap 4 automaticky upraví styl obrázku tak, aby se vešel svisle na navigační panel.
Příklad
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Sbalení navigační lišty
Velmi často, zejména na malých obrazovkách, chcete skrýt navigační odkazy a nahradit je tlačítkem, které by je mělo po kliknutí odhalit.
Chcete-li vytvořit skládací navigační panel, použijte tlačítko s . Poté zabalte obsah navigační lišty (odkazy atd.) do prvku div s , za nímž následuje id, které odpovídá tlačítku: " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Příklad
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
Tip: Můžete také odstranit třídu .navbar-expand-md, abyste VŽDY skryli odkazy navbar a zobrazili přepínací tlačítko.
Navbar s rozevíracím seznamem
Navigační panely mohou také obsahovat rozevírací nabídky:
Příklad
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Formuláře a tlačítka navigační lišty
Přidejte <form>prvek s class="form-inline"do skupiny vstupů a tlačítek vedle sebe:
Příklad
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Můžete také použít jiné vstupní třídy, jako je .input-group-prependnebo .input-group-appendk připojení ikony nebo textu nápovědy vedle vstupního pole. Více o těchto třídách se dozvíte v kapitole Bootstrap Inputs.
Příklad
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
Text navigační lišty
Použijte .navbar-texttřídu k vertikálnímu zarovnání všech prvků uvnitř navigační lišty, které nejsou odkazy (zajišťuje správné odsazení a barvu textu).
Příklad
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Pevná navigační lišta
Navigační lišta může být také upevněna v horní nebo dolní části stránky.
Pevná navigační lišta zůstává viditelná na pevné pozici (nahoře nebo dole) nezávisle na posouvání stránky.
Třída .fixed-topzafixuje navigační lištu nahoře :
Příklad
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Použijte .fixed-bottomtřídu, aby navigační panel zůstal ve spodní části stránky:
Příklad
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>