39 lines
1.4 KiB
Markdown
39 lines
1.4 KiB
Markdown
---
|
||
title: Dropdowns
|
||
localeTitle: Dropdowns
|
||
---
|
||
## Dropdowns
|
||
|
||
O Bootstrap fornece Dropdowns como um plugin para exibir listas de links. O menu suspenso é um botão que alterna a exibição de uma lista de links.
|
||
|
||
Os menus suspensos do Bootstrap são projetados para serem genéricos e aplicáveis a uma variedade de situações. Por exemplo, é possível criar menus suspensos que contenham campos de pesquisa ou formulários de login.
|
||
|
||
## Exemplo
|
||
|
||
```html
|
||
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropdown example
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
## Exemplo explicado
|
||
|
||
A classe _.dropdown_ indica um menu suspenso.
|
||
|
||
Para abrir o menu suspenso, use um botão ou um link com uma classe de _.dropdown-toggle_ e o atributo _data-toggle = "dropdown_ .
|
||
|
||
A classe _.caret_ cria um ícone de seta de cursor (▼), que indica que o botão é um menu suspenso.
|
||
|
||
Adicione a classe _.dropdown-menu_ a um elemento de lista não ordenada para realmente criar o menu suspenso.
|
||
|
||
#### Mais Informações:
|
||
|
||
https://getbootstrap.com/docs/4.0/components/dropdowns/ |