Abas e pílulas do Bootstrap
Menus
A maioria das páginas da web tem algum tipo de menu.
Em HTML, um menu geralmente é definido em uma lista não ordenada <ul>(e estilizada posteriormente), assim:
<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 a
.list-inlineclasse a <ul>:
<ul class="list-inline">
Ou você pode exibir o menu acima com as guias e pílulas do Bootstraps (veja abaixo).
Nota: Veja o último exemplo nesta página para descobrir como tornar abas e pílulas alternáveis/dinâmicas.
Abas
As guias são criadas 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>
Abas com menu suspenso
As guias também podem conter menus suspensos.
O exemplo a seguir adiciona um menu suspenso ao "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>
Comprimidos
As pílulas são criadas com <ul class="nav nav-pills">. Marque também 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>
Pílulas Verticais
Comprimidos também podem ser exibidos verticalmente. Basta adicionar a .nav-stackedclasse:
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>
Comprimidos verticais em uma fileira
Texto...
Texto...
Texto...
O exemplo a seguir coloca o menu vertical de pílulas na última coluna. Assim, em uma tela grande, o menu será exibido à direita. Mas em uma tela pequena, o conteúdo se ajustará 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>
Comprimidos com menu suspenso
As pílulas também podem conter menus suspensos.
O exemplo a seguir adiciona um menu suspenso ao "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>
Abas e pílulas centralizadas
Para centralizar/justificar as abas e pílulas, use a .nav-justifiedclasse.
Observe que em telas menores que 768px, os itens da lista são empilhados (o conteúdo permanecerá centralizado):
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>
Abas alternáveis/dinâmicas
CASA
A dor em si é importante, mas a dor é aumentada pelo processo de adipiscação, mas dou tempo para reduzi-la para que eu faça um ótimo trabalho e dor.
Para tornar as guias alternáveis, adicione o data-toggle="tab"atributo a cada link. Em seguida, adicione uma .tab-paneclasse com um ID exclusivo para cada guia e envolva-as em um
<div>elemento com class .tab-content.
Se você quiser que as guias apareçam e desapareçam ao clicar nelas, adicione a
.fadeclasse a .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>
Comprimidos alternáveis / dinâmicos
O mesmo código se aplica aos comprimidos; altere apenas o atributo data-toggle 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>
Referência Completa de Navegação Bootstrap
Para uma referência completa de todas as classes de navegação, acesse nossa Referência de Navegação Bootstrap completa .
Para uma referência completa de todas as opções de guias, métodos e eventos, acesse nossa Referência de guias do Bootstrap JS .