3.5 KiB
title | localeTitle |
---|---|
Tabs and Pills | Abas e Comprimidos |
Abas e Comprimidos
Guias e Pílulas são formas de navegação. Isso significa que eles ajudam o usuário final a navegar pelo site de uma maneira amigável.
Guias
Para obter as guias de bootstrap, primeiro você precisa de um elemento que tenha a classe .nav
atribuída a ele. Então você simplesmente adiciona uma classe extra chamada .nav-tabs
.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Comprimidos
O Bootstrap Pills é obtido da mesma forma que o Bootstrap Tabs, exceto em vez de .nav-tabs
, use .nav-pills
.
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Comprimidos empilhados
Pílulas Bootstrap também são empilháveis verticalmente usando .nav stacked
em conjunto com .nav-pills
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Bootstrap Tabs / Pills Justified
Ambas as guias e pílulas do Bootstrap podem ter largura igual do pai em telas mais largas que o 768px usando .nav-justified
classe .nav-justified
. Em telas menores, os links de navegação são empilhados.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Links desativados
Para qualquer componente nav (guias ou pílulas) adicione .disabled
para links cinza e sem efeitos de foco
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Guias com Dropdowns
Adicione menus suspensos às suas guias de navegação.
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Guias com Dropdowns
Adicione menus suspensos às suas pílulas nav.
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>