freeCodeCamp/guide/portuguese/bootstrap/tabs-and-pills/index.md

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>