Botões de bootstrap | Explicado
Este artigo o instruirá:
- Como fazer botões no bootstrap?
- Como criar botões de contorno no bootstrap?
- Como ajustar os tamanhos dos botões de bootstrap?
- Como fazer um botão em nível de bloco no bootstrap?
- Como criar botões de estado ativo no bootstrap?
- Como criar botões de estado desativado no bootstrap?
Como fazer botões no bootstrap?
O bootstrap “btn”A classe é utilizada para criar botões. Para adicionar botões estilizados, você pode usar o “btn”Classe com a aula de cores, como“Btn-success”Para criar um botão verde.
Em HTML, o “","", e "”Tags com o tipo“botão”São utilizados para criar botões. O "btn”A classe tem um estilo predefinido que adiciona estilo básico aos elementos do botão.
Para um conceito claro, confira o exemplo abaixo.
Exemplo
No arquivo html, siga as etapas para criar botões usando tags diferentes:
- Adicionar "" e "”Elementos e atribui -los“btn" e "Btn-Primary" Aulas.
- Então, adicione um “”Tag com o tipo“botão”. Atribua o “btn" e "Btn-success”Para modelar como dois primeiros botões como azul e o terceiro como verde:
Abrir
Saída
Como criar botões de contorno no bootstrap?
Para adicionar contornos de botão, o bootstrap “BTN-Outline-*”A classe é usada. Em sua sintaxe, “*”Aqui representa a cor do contorno. Por exemplo, "Danger Btn-Outline"Coloca o esboço vermelho,"Btn-Outline-Primary”Define o contorno azul e mais.
Analise o código abaixo:
Pode -se observar que o “Próximo”Button tem um contorno azul, o“Cancelar”Botão com contorno vermelho e o“Sucesso”Button foi estilizado com um esboço verde:
Como ajustar os tamanhos dos botões de bootstrap?
Algumas classes de bootstrap são aplicadas para ajustar os tamanhos dos botões, como:
- ““btn-lg”A classe é aplicada para criar um botão grande. Esta classe pode aumentar o tamanho da fonte e o preenchimento.
- ““btn-md”Cria um botão de tamanho médio.
- ““btn-sm”Cria um pequeno botão.
Exemplo
Agora, criaremos três botões com tamanhos diferentes e nomes auto-explicativos:
Saída
Como fazer um botão em nível de bloco no bootstrap?
Os botões em nível de bloco são os que mantêm o tamanho da largura total. Para criar os botões em nível de bloco, o “BTN-BLOCK”A classe é utilizada da seguinte maneira
Saída
Como criar botões de estado ativo no bootstrap?
Os botões de estado ativo se referem aos botões que estão atualmente ativos. Esses botões são um pouco mais escuros que o normal. Para criar esses botões, o bootstrap “ativo”A classe é utilizada.
Exemplo
O código abaixo cria dois botões. O primeiro está no estado normal, enquanto o outro é aplicado com o “ativo" aula:
Saída
Como criar botões de estado desativado no bootstrap?
Os botões estaduais desativados se referem aos botões que são não clicáveis e inutilizáveis. Em bootstrap, o “desabilitado”A classe é utilizada para criar um botão de estado desativado. O "desabilitado”O atributo também pode ser usado para esse fim.
Exemplo
Confira o exemplo fornecido abaixo:
- O primeiro botão não está em um estado com deficiência.
- O segundo utiliza o “desabilitado”Classe para criar um botão de estado desativado.
- O terceiro usa o “desabilitado”Atributo:
Saída
Cobrimos aspectos diferentes relacionados a botões de bootstrap e seu estilo no CSS.
Conclusão
O "btn”A classe é utilizada para criar botões de bootstrap com um design simples. Para criar botões coloridos e de contorno, o “btn-*" e "BTN-Outline-*”As aulas são utilizadas onde“*”Simboliza qualquer aula de cores. Por exemplo, "Btn-Warning”Cria um botão amarelo,“BTN-Outline-Darning”Cria um botão amarelo delineado e muito mais. Para tornar os botões ativos ou desativados, as classes "ativas" e "desativadas" são aplicadas, respectivamente. Este post forneceu um guia abrangente sobre os botões de bootstrap.