paski nawigacyjne
Pasek nawigacyjny jest nagłówek nawigacji, który jest umieszczony na górze strony:
Z Bootstrap , pasek nawigacyjny może przedłużyć lub zwinąć, w zależności od rozmiaru ekranu.
Standardowy pasek nawigacyjny jest tworzony z <nav class="navbar navbar-default"> .
Poniższy przykład pokazuje, jak dodać pasek nawigacyjny na górze strony:
Przykład
<body>
<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>
...
Spróbuj sam " Wszystkie przykłady na tej stronie pojawi się pasek nawigacyjny, który zajmuje zbyt dużo miejsca na małych ekranach (jednak pasek nawigacyjny będzie na jednej linii na dużych ekranach - bo Bootstrap reaguje). Ten problem (z małymi ekranami) zostaną rozwiązane w ostatnim przykładzie na tej stronie.
Odwrócony pasek nawigacji
Jeśli nie podoba ci się styl domyślnym pasku nawigacyjnym, Bootstrap zapewnia alternatywny, czarny navbar:
Wystarczy zmienić .navbar-default klasę 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>
Spróbuj sam " Poprawiono Pasek nawigacyjny
Pasek nawigacyjny może być również ustalona na górze lub na dole strony.
Stała pasek nawigacyjny pozostaje widoczna w stałej pozycji (górnej lub dolnej), niezależnie od przewijania strony.
.navbar-fixed-top klasy sprawia, że stały na górze paska nawigacji:
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> Spróbuj sam " .navbar-fixed-bottom klasy sprawia, że pobyt paska nawigacji u dołu:
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> Spróbuj sam " Pasek nawigacyjny Z rozwijanej
paski nawigacyjne mogą również posiadać rozwijanych menu.
Poniższy przykład dodaje menu rozwijane dla przycisku "Page 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> Spróbuj sam " Wyrównany do prawej strony pasek nawigacji
.navbar-right klasa jest używana do prawej wyrównać przycisków paska nawigacyjnego.
W poniższym przykładzie możemy wstawić "Sign up" przycisk i przycisk "Zaloguj się" po prawej stronie na pasku nawigacyjnym. Mamy również dodać glyphicon na każdej z dwóch nowych przycisków:
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>
<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> Spróbuj sam " Zwijanie pasku nawigacyjnym
Pasek nawigacyjny zajmuje zbyt dużo miejsca na małym ekranie.
Musimy ukryć pasek nawigacyjny; i tylko pokazać, kiedy jest to potrzebne.
W poniższym przykładzie pasek nawigacyjny jest zastąpiony przez przycisk w prawym górnym rogu. Tylko wtedy, gdy przycisk zostanie kliknięty, wyświetlany będzie 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> Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»