menus
A maioria das páginas da web têm algum tipo de menu.
Em HTML, um menu é muitas vezes definido em uma lista não ordenada <ul> (e denominado posteriormente), como este:
<ul>
<li><a href="#">Home</a></li>
<li><a
href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Se você deseja criar um menu horizontal da lista acima, adicione o .list-inline classe para <ul> :
<ul class="list-inline"> Tente você mesmo " Ou você pode exibir o menu acima, com Bootstraps' Tabs and Pills (veja abaixo).
Nota: Consulte o último exemplo nesta página para descobrir como fazer guias e pílulas toggleable / dinâmico.
tabs
Tabs são criados com <ul class="nav nav-tabs"> :
Dica: Marque também a página atual com <li class="active"> .
O exemplo a seguir cria guias de navegação:
Exemplo
<ul class="nav nav-tabs">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Tente você mesmo " Tabs com o menu drop-down
Tabs também pode manter menus suspensos.
O exemplo a seguir adiciona um menu suspenso para "Menu 1":
Exemplo
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Tente você mesmo " Pills
Pílulas são criados com <ul class="nav nav-pills"> . Também marcar a página atual com <li class="active"> :
Exemplo
<ul class="nav nav-pills">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Tente você mesmo " Vertical Pills
Pills também pode ser exibido verticalmente. Basta adicionar o .nav-stacked classe:
Exemplo
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Tente você mesmo " Vertical Pills em uma fileira
Texto...
Texto...
Texto...
O exemplo a seguir coloca o menu pílula vertical dentro da última coluna. Então, em uma grande tela o menu será exibido à direita. Mas em uma tela pequena, o conteúdo ajusta-se automaticamente em um layout de coluna única:
Exemplo
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> Tente você mesmo " Pills com o menu drop-down
Pills também pode manter menus suspensos.
O exemplo a seguir adiciona um menu suspenso para "Menu 1":
Exemplo
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Tente você mesmo " Centradas Tabs and Pills
Para o centro / justifica os guias e pills , use o .nav-justified classe.
Note-se que em telas menores que 768px, os itens da lista são empilhados (conteúdo permanecerá centrado):
Exemplo
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu
3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills
nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Tente você mesmo " Toggleable / dinâmicos Tabs
CASA
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua.
Para fazer o toggleable guias, adicione a data-toggle="tab" atributo para cada link. Em seguida, adicione um .tab-pane classe com um ID único para cada guia e envolvê-los dentro de um <div> elemento com classe .tab-content .
Se você quer as guias para fade in e out, quando clicar sobre eles, adicione o .fade classe para .tab-pane :
Exemplo
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Tente você mesmo " Toggleable / dinâmicos Pills
O mesmo código se aplica a pills ; só mudam o atributo-toggle dados para data-toggle="pill" :
Exemplo
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 » Exercício 6»
Conclua Bootstrap Navigation Referência
Para uma referência completa de todas as classes de navegação, vá ao nosso completa Bootstrap Navigation Referência .
Para uma referência completa de todos os guia Opções, métodos e eventos, ir ao nosso Bootstrap JS Tab Referência .