suspensa Básico
Um menu suspenso é um menu toggleable que permite ao usuário escolher um valor de uma lista predefinida:
Exemplo
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div> Tente você mesmo " exemplo Explicado
O .dropdown classe indica um menu suspenso.
Para abrir o menu dropdown, use um botão ou um link com uma classe de .dropdown-toggle eo data-toggle="dropdown" atributo.
O .caret classe cria um ícone de seta acento circunflexo ( ) ( ) ( ) , O que indica que o botão é uma suspenso.
Adicione o .dropdown-menu classe para um <ul> elemento para realmente construir no menu suspenso.
Divisor suspensa
O .divider classe é usada para links separados dentro do menu suspenso com uma borda horizontal fina:
suspensa Cabeçalho
O .dropdown-header classe é usada para adicionar cabeçalhos dentro do menu suspenso:
Desativar um item
Para desativar um item no menu suspenso, use o .disabled classe:
Posição suspensa
Para alinhar à direita do menu suspenso, adicionar o .dropdown-menu-right classe para o elemento com .dropdown-menu:
Soltar-se
Se quiser que o menu suspenso para expandir para cima em vez de para baixo, altere o <div> elemento com class="dropdown" para "dropup" :
Acessibilidade suspensa
Para ajudar a melhorar a acessibilidade para as pessoas que utilizam leitores de tela, você deve incluir o seguinte role e aria-* atributos, ao criar um menu suspenso:
Exemplo
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div> Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
Conclua Bootstrap suspensa Reference
Para uma referência completa de todas as opções suspensas, métodos e eventos, ir ao nosso Bootstrap JS suspensa Referência .