Navigační lišta Bootstrap
Navigační lišty
Navigační lišta je navigační záhlaví, které je umístěno v horní části stránky:
Pomocí Bootstrapu se může navigační panel roztáhnout nebo sbalit v závislosti na velikosti obrazovky.
Standardní navigační panel je vytvořen pomocí <nav class="navbar navbar-default">.
Následující příklad ukazuje, jak přidat navigační panel do horní části stránky:
Příklad
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
Poznámka: Všechny příklady na této stránce budou zobrazovat navigační panel, který na malých obrazovkách zabírá příliš mnoho místa (na velkých obrazovkách však bude navigační panel na jednom řádku – protože Bootstrap reaguje). Tento problém (s malými obrazovkami) bude vyřešen v posledním příkladu na této stránce.
Invertovaný navigační panel
Pokud se vám nelíbí styl výchozího navigačního panelu, Bootstrap nabízí alternativní černý navigační panel:
Stačí změnit .navbar-defaulttřídu na .navbar-inverse:
Příklad
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Navigační Lišta s rozevíracím seznamem
Navigační panely mohou také obsahovat rozevírací nabídky.
Následující příklad přidává rozbalovací nabídku pro tlačítko „Stránka 1“:
Příklad
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Navigační panel zarovnaný vpravo
Třída .navbar-rightse používá k zarovnání tlačítek navigační lišty vpravo.
V následujícím příkladu vložíme vpravo do navigační lišty tlačítko "Zaregistrovat se" a tlačítko "Přihlásit se". Na každé ze dvou nových tlačítek také přidáváme glyfikon:
Příklad
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
Tlačítka navigační lišty
Chcete-li přidat tlačítka na navigační panel, přidejte .navbar-btntřídu na tlačítko Bootstrap:
Příklad
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Navbar Forms
Chcete-li přidat prvky formuláře na navigační panel, přidejte .navbar-formtřídu do prvku formuláře a přidejte vstup(y). Všimněte si, že jsme přidali .form-grouptřídu do kontejneru div obsahujícího vstup. To přidává správné odsazení, pokud máte více než jeden vstup (více se o tom dozvíte v kapitole Formuláře).
Příklad
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
.input-groupTřídy a můžete také použít .input-group-addonk 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
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
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-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</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 .navbar-fixed-topzafixuje navigační panel nahoře:
Příklad
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Třída .navbar-fixed-bottomzpůsobí, že navigační panel zůstane dole:
Příklad
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Sbalení navigační lišty
Navigační lišta často zabírá na malé obrazovce příliš mnoho místa.
Měli bychom skrýt navigační lištu; a ukažte to pouze tehdy, když je to potřeba.
V následujícím příkladu je navigační lišta nahrazena tlačítkem v pravém horním rohu. Pouze po kliknutí na tlačítko se zobrazí navigační lišta:
Příklad
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>