97 lines
2.7 KiB
Markdown
97 lines
2.7 KiB
Markdown
|
---
|
||
|
|
title: Buttons
|
||
|
|
localeTitle: Botões
|
||
|
|
---
|
||
|
|
## Botões
|
||
|
|
|
||
|
|
A estrutura do Bootstrap fornece várias opções de estilo para botões. Esses estilos ajudam você a fornecer uma representação visual ao usuário do que o botão pode fazer.
|
||
|
|
|
||
|
|
#### Como usar:
|
||
|
|
|
||
|
|
Para usar os botões de bootstrap, você segue as mesmas etapas para criar um botão em HTML, exceto que também aplica a classe CSS aplicável ao botão. Um exemplo de código foi fornecido abaixo.
|
||
|
|
|
||
|
|
**Exemplo de código:**
|
||
|
|
|
||
|
|
`<button type="button" class="btn btn-primary">Primary</button>`
|
||
|
|
|
||
|
|
Primário
|
||
|
|
|
||
|
|
Você também pode usar botões de bootstrap com os elementos `<a>` e `<input>` , conforme mostrado nos exemplos abaixo.
|
||
|
|
|
||
|
|
`<a class="btn btn-primary" href="#" role="button">This button is a link</a>`
|
||
|
|
|
||
|
|
[Este botão é um link](#)
|
||
|
|
|
||
|
|
`<input class="btn btn-primary" type="submit" value="Submit">`
|
||
|
|
|
||
|
|
#### Lista de Classes do Botão de Inicialização:
|
||
|
|
|
||
|
|
Esta é uma lista das classes CSS que o bootstrap fornece para os botões.
|
||
|
|
|
||
|
|
`.btn` Este é o botão básico do bootstrap.
|
||
|
|
|
||
|
|
Basic
|
||
|
|
|
||
|
|
`.btn-default` Este é o botão padrão do bootstrap.
|
||
|
|
|
||
|
|
Padrão
|
||
|
|
|
||
|
|
`.btn-primary` Este é o botão principal do bootstrap.
|
||
|
|
|
||
|
|
Primário
|
||
|
|
|
||
|
|
`.btn-success` Este é o botão de sucesso do bootstrap.
|
||
|
|
|
||
|
|
Sucesso
|
||
|
|
|
||
|
|
`.btn-info` Este é o botão de informações do bootstrap.
|
||
|
|
|
||
|
|
Info
|
||
|
|
|
||
|
|
`.btn-warning` Este é o botão de aviso do bootstrap.
|
||
|
|
|
||
|
|
Aviso
|
||
|
|
|
||
|
|
`.btn-danger` Este é o botão de perigo do bootstrap.
|
||
|
|
|
||
|
|
perigo
|
||
|
|
|
||
|
|
`.btn-link` Este é o botão de link do bootstrap.
|
||
|
|
|
||
|
|
Ligação
|
||
|
|
|
||
|
|
`.btn-light` Este é o botão de luz do bootstrap.
|
||
|
|
|
||
|
|
Leve
|
||
|
|
|
||
|
|
#### Tamanhos de botão de inicialização:
|
||
|
|
|
||
|
|
Esta é uma lista das classes CSS para tamanhos diferentes dos botões.
|
||
|
|
|
||
|
|
`.btn-lg` Este é o botão grande do bootstrap.
|
||
|
|
|
||
|
|
ampla
|
||
|
|
|
||
|
|
`.btn-sm` Este é o pequeno botão do bootstrap.
|
||
|
|
|
||
|
|
Pequeno
|
||
|
|
|
||
|
|
`.btn-xs` Este é o botão extra pequeno do bootstrap.
|
||
|
|
|
||
|
|
Muito pequeno
|
||
|
|
|
||
|
|
#### Bootstrap Delineou Botões:
|
||
|
|
|
||
|
|
É possível também ter botões delineados em vez de totalmente coloridos nos botões. Isso é conseguido colocando o `outline` correção intermediária entre a classe de botão desejada. Um uso de amostra seria o seguinte:
|
||
|
|
|
||
|
|
`<button type="button" class="btn btn-outline-primary">Primary</button>`
|
||
|
|
|
||
|
|
Os botões descritos fazem parte do Bootstrap desde a versão 4, por favor, certifique-se de que você está usando a versão correta, caso não consiga fazê-los funcionar.
|
||
|
|
|
||
|
|
_Nota: Não inclua o ponto no Atributo de Classe HTML, referindo-se às classes com um ponto só é usado ao ajustar as classes em CSS._
|
||
|
|
|
||
|
|
#### Mais Informações:
|
||
|
|
|
||
|
|
* [Documentação dos botões do Bootstrap](https://getbootstrap.com/docs/4.0/components/buttons/)
|
||
|
|
* [Documentação do Bootstrap Button Group](http://getbootstrap.com/docs/4.0/components/button-group/)
|
||
|
|
* [Inicialização do Bootstrap](/articles/bootstrap/bootstrap-get-started)
|