Pasek nawigacyjny Bootstrapa
Paski nawigacyjne
Pasek nawigacyjny to nagłówek nawigacyjny umieszczony u góry strony:
Dzięki Bootstrap pasek nawigacyjny może się wysuwać lub zwijać w zależności od rozmiaru ekranu.
Standardowy pasek nawigacyjny jest tworzony za pomocą <nav class="navbar navbar-default">.
Poniższy przykład pokazuje, jak dodać pasek nawigacyjny u góry strony:
Przykład
<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>
...
Uwaga: Wszystkie przykłady na tej stronie pokażą pasek nawigacyjny, który zajmuje zbyt dużo miejsca na małych ekranach (jednak pasek nawigacyjny będzie w jednej linii na dużych ekranach - ponieważ Bootstrap jest responsywny). Ten problem (z małymi ekranami) zostanie rozwiązany w ostatnim przykładzie na tej stronie.
Odwrócony pasek nawigacyjny
Jeśli nie podoba Ci się styl domyślnego paska nawigacyjnego, Bootstrap zapewnia alternatywny, czarny pasek nawigacyjny:
Po prostu zmień .navbar-defaultklasę na .navbar-inverse:
Przykład
<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>
Pasek nawigacyjny z menu rozwijanym
Paski nawigacyjne mogą również zawierać menu rozwijane.
Poniższy przykład dodaje menu rozwijane dla przycisku „Strona 1”:
Przykład
<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>
Pasek nawigacyjny wyrównany do prawej
Klasa .navbar-rightsłuży do wyrównywania przycisków paska nawigacyjnego do prawej.
W poniższym przykładzie wstawiamy przycisk "Zarejestruj się" i przycisk "Zaloguj się" po prawej stronie na pasku nawigacyjnym. Na każdym z dwóch nowych przycisków dodajemy także glif:
Przykład
<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>
Przyciski paska nawigacyjnego
Aby dodać przyciski na pasku nawigacyjnym, dodaj .navbar-btnklasę do przycisku Bootstrap:
Przykład
<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>
Formularze paska nawigacyjnego
Aby dodać elementy formularza wewnątrz paska nawigacyjnego, dodaj .navbar-formklasę do elementu formularza i dodaj dane wejściowe. Zauważ, że dodaliśmy .form-groupklasę do kontenera div zawierającego dane wejściowe. Dodaje to odpowiednie wypełnienie, jeśli masz więcej niż jedno wejście (więcej na ten temat dowiesz się w rozdziale Formularze).
Przykład
<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>
Możesz także użyć klas .input-groupi .input-group-addon, aby dołączyć ikonę lub tekst pomocy obok pola wejściowego. Więcej o tych klasach dowiesz się w rozdziale Bootstrap Inputs.
Przykład
<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>
Tekst paska nawigacyjnego
Użyj .navbar-textklasy, aby wyrównać w pionie wszystkie elementy wewnątrz paska nawigacyjnego, które nie są łączami (zapewnia prawidłowe wypełnienie i kolor tekstu).
Przykład
<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>
Naprawiono pasek nawigacyjny
Pasek nawigacyjny można również zamocować na górze lub na dole strony.
Stały pasek nawigacyjny pozostaje widoczny w stałej pozycji (na górze lub na dole) niezależnie od przewijania strony.
Klasa .navbar-fixed-topsprawia, że pasek nawigacyjny jest zamocowany na górze:
Przykład
<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>
Klasa .navbar-fixed-bottomsprawia, że pasek nawigacyjny pozostaje na dole:
Przykład
<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>
Zwijanie paska nawigacyjnego
Pasek nawigacyjny często zajmuje zbyt dużo miejsca na małym ekranie.
Powinniśmy ukryć pasek nawigacyjny; i pokaż to tylko wtedy, gdy jest to potrzebne.
W poniższym przykładzie pasek nawigacji został zastąpiony przyciskiem w prawym górnym rogu. Dopiero po kliknięciu przycisku zostanie wyświetlony pasek nawigacji:
Przykład
<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>