2.7 KiB
title | localeTitle |
---|---|
Buttons | 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>
<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.