Bare de navigare
Bara de navigare este un antet de navigare care este plasat în partea de sus a paginii
Cu Bootstrap , o bară de navigare se poate extinde sau restrânge, în funcție de dimensiunea ecranului.
Bara de navigare standard , este creat cu <nav class="navbar navbar-default"> .
Următorul exemplu arată cum să adăugați o bară de navigare în partea de sus a paginii
Exemplu
<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>
...
Încearcă - l singur » Toate exemplele din această pagină va afișa o bară de navigare , care durează prea mult spațiu pe ecrane mici ( cu toate acestea, bara de navigare va fi pe o singură linie pe ecrane mari - pentru că Bootstrap este receptiv). Această problemă (cu ecrane mici) vor fi rezolvate în ultimul exemplu pe această pagină.
Inverted Bara de navigare
Dacă nu vă place stilul de bara de navigare implicit, Bootstrap oferă o alternativă, navbar negru:
Doar schimba .navbar-default clasa în .navbar-inverse :
Exemplu
<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>
Încearcă - l singur » Bara de navigare fix
Bara de navigare poate fi, de asemenea, fixat în partea de sus sau în partea de jos a paginii.
Bara de navigare fixă rămâne vizibilă într - o poziție fixă (top or bottom) de (top or bottom) de (top or bottom) , independent de pagina de parcurgere.
.navbar-fixed-top clasa face bara de navigare fixat în partea de sus:
Exemplu
<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> Încearcă - l singur » .navbar-fixed-bottom clasa face șederea bara de navigare din partea de jos:
Exemplu
<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> Încearcă - l singur » Bara de navigare Cu Dropdown
barele de navigare pot organiza, de asemenea, meniuri derulante.
Următorul exemplu adaugă un meniu drop - down pentru "Page 1" butonul:
Exemplu
<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> Încearcă - l singur » Aliniate dreapta bara de navigare
.navbar-right clasa este folosit la dreapta Aliniere butoane bara de navigare.
În exemplul următor vom introduce un "Sign Up" buton și o "Login" butonul din dreapta în bara de navigare. De asemenea, adăugăm un glyphicon pe fiecare dintre cele două butoane noi:
Exemplu
<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> Încearcă - l singur » Comasarea bara de navigare
Bara de navigare durează prea mult spațiu pe un ecran mic.
Ar trebui să ascundem bara de navigare; și numai ea arată când este necesar.
În exemplul următor bara de navigare se înlocuiește cu un buton în colțul din dreapta sus. Numai atunci când butonul este apăsat, bara de navigare va fi afișat:
Exemplu
<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> Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»