Barra de Navegação Bootstrap
Barras de navegação
Uma barra de navegação é um cabeçalho de navegação que é colocado na parte superior da página:
Com o Bootstrap, uma barra de navegação pode ser estendida ou recolhida, dependendo do tamanho da tela.
Uma barra de navegação padrão é criada com <nav class="navbar navbar-default">.
O exemplo a seguir mostra como adicionar uma barra de navegação à parte superior da página:
Exemplo
<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>
...
Nota: Todos os exemplos nesta página mostrarão uma barra de navegação que ocupa muito espaço em telas pequenas (no entanto, a barra de navegação estará em uma única linha em telas grandes - porque o Bootstrap é responsivo). Este problema (com as telas pequenas) será resolvido no último exemplo desta página.
Barra de navegação invertida
Se você não gosta do estilo da barra de navegação padrão, o Bootstrap fornece uma barra de navegação preta alternativa:
Basta alterar a .navbar-defaultclasse para .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>
Barra de navegação com menu suspenso
As barras de navegação também podem conter 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>
Barra de navegação alinhada à direita
A .navbar-rightclasse é usada para alinhar os botões da barra de navegação à direita.
No exemplo a seguir, inserimos um botão "Cadastre-se" e um botão "Login" à direita na barra de navegação. Também adicionamos um glifo 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>
</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>
Botões da barra de navegação
Para adicionar botões dentro da barra de navegação, adicione a .navbar-btnclasse em um botão Bootstrap:
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="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Formulários da barra de navegação
Para adicionar elementos de formulário dentro da barra de navegação, adicione a .navbar-formclasse a um elemento de formulário e adicione uma(s) entrada(s). Observe que adicionamos uma .form-groupclasse ao contêiner div que contém a entrada. Isso adiciona preenchimento adequado se você tiver mais de uma entrada (você aprenderá mais sobre isso no capítulo Formulários).
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>
</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>
Você também pode usar as classes .input-groupe .input-group-addonpara anexar um ícone ou texto de ajuda ao lado do campo de entrada. Você aprenderá mais sobre essas classes no capítulo Bootstrap Inputs.
Exemplo
<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>
Texto da barra de navegação
Use a .navbar-textclasse para alinhar verticalmente quaisquer elementos dentro da barra de navegação que não sejam links (garante o preenchimento e a cor do texto adequados).
Exemplo
<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>
Barra de navegação fixa
A barra de navegação também pode ser fixada na parte superior ou inferior da página.
Uma barra de navegação fixa fica visível em uma posição fixa (superior ou inferior) independente da rolagem da página.
A .navbar-fixed-topclasse fixa a barra de navegação na parte superior:
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>
A .navbar-fixed-bottomclasse faz com que a barra de navegação fique 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>
Recolher a barra de navegação
A barra de navegação geralmente ocupa muito espaço em uma tela pequena.
Devemos ocultar a barra de navegação; e mostrá-lo apenas quando for necessário.
No exemplo a seguir, a barra de navegação é substituída por um botão no canto superior direito. Somente quando o botão for 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>