barras de navegação
Um barra de navegação é um cabeçalho de navegação que é colocada no topo da página:
Com Bootstrap , uma barra de navegação pode estender ou recolher, dependendo do tamanho da tela.
Uma barra de navegação padrão é criado com <nav class="navbar navbar-default"> .
O exemplo a seguir mostra como adicionar uma barra de navegação ao topo da página:
Exemplo
<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>
...
Tente você mesmo " Todos os exemplos nesta página irá mostrar uma barra de navegação que ocupa muito espaço em telas pequenas (no entanto, a barra de navegação será em uma única linha em telas grandes - porque Bootstrap é sensível). Este problema (com as telas pequenas) será resolvido no último exemplo nesta página.
Invertido Navigation Bar
Se você não gosta do estilo da barra de navegação padrão, Bootstrap oferece uma alternativa, navbar preto:
Basta alterar o .navbar-default classe em .navbar-inverse :
Exemplo
<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>
Tente você mesmo " Corrigido barra de navegação
A barra de navegação pode também ser fixada na parte superior ou na parte inferior da página.
Uma barra de navegação fixa permanece visível em uma posição fixa (superior ou inferior), independente da página de rolagem.
O .navbar-fixed-top classe faz a barra de navegação fixa no topo:
Exemplo
<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> Tente você mesmo " O .navbar-fixed-bottom classe torna a estadia barra de navegação na parte inferior:
Exemplo
<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> Tente você mesmo " Barra de navegação com Dropdown
barras de navegação também pode manter menus suspensos.
O exemplo a seguir adiciona um menu suspenso para o botão "Página 1":
Exemplo
<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> Tente você mesmo " Alinhado à direita da barra de navegação
O .navbar-right classe é usada para-alinhar à direita da barra de navegação botões.
No exemplo a seguir que inserir um botão "Sign Up" e um botão "Login" para a direita na barra de navegação. Nós também adicionar um glyphicon em cada um dos dois novos botões:
Exemplo
<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> Tente você mesmo " Colapso da barra de navegação
A barra de navegação ocupa muito espaço em uma tela pequena.
Devemos esconder a barra de navegação; e apenas mostrá-lo quando for necessário.
No exemplo a seguir na barra de navegação é substituído por um botão no canto superior direito. Só quando o botão é clicado, a barra de navegação será exibida:
Exemplo
<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> Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»