Este artigo irá instruí-lo:
- Como fazer botões no Bootstrap?
- Como criar botões de contorno no Bootstrap?
- Como ajustar os tamanhos dos botões do Bootstrap?
- Como fazer um botão de 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 ” é utilizada para criar botões. Para adicionar botões estilizados, você pode usar o botão “ btn ” com a classe de cores, como “ btn-sucesso ” para criar um botão verde.
Em HTML, 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 atribuí-los “ btn ' e ' btn-primário ' Aulas. - Em seguida, adicione um “
” tag com o tipo “ botão ”. Atribua a ele o “ btn ' e ' btn-sucesso ” para estilizar os dois primeiros botões como azul e o terceiro como verde:
< uma classe = 'btn btn-primário' href = '#' > Abrir < / uma >
< entrada tipo = 'botão' classe = 'btn btn-sucesso' valor = 'Procurar' >
Saída
Como criar botões de contorno no Bootstrap?
Para adicionar contornos de botão, o Bootstrap “ btn-outline-* ” é usada. Em sua sintaxe,“ * ” aqui representa a cor do contorno. Por exemplo, ' btn-contorno-perigo ” coloca o contorno vermelho, “ btn-outline-primary ” define o contorno azul e muito mais.
Analise o código abaixo:
< botão tipo = 'botão' classe = 'btn btn-outline-primary' >Próximo< / botão >< botão tipo = 'botão' classe = 'btn btn-contorno-perigo' >Cancelar< / botão >
< botão tipo = 'botão' classe = 'btn btn-contorno-sucesso' >Sucesso< / botão >
Pode-se observar que o “ Próximo ” tem um contorno azul, o botão “ Cancelar ” botão com contorno vermelho e o botão “ Sucesso ” foi estilizado com um contorno verde:
Como ajustar os tamanhos dos botões do Bootstrap?
Algumas classes Bootstrap são aplicadas para ajustar os tamanhos dos botões, como:
- “ btn-lg ” é aplicada para criar um botão grande. Essa 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 autoexplicativos:
< botão tipo = 'botão' classe = 'btn btn-secundário btn-lg' >Grande< / botão >< botão tipo = 'botão' classe = 'btn btn-warning btn-md' >médio< / botão >
< botão tipo = 'botão' classe = 'btn btn-perigo btn-sm' >Pequeno< / botão >
Saída
Como fazer um botão de nível de bloco no Bootstrap?
Os botões de nível de bloco são os que mantêm o tamanho de largura total. Para criar os botões de nível de bloco, o “ btn-block ” classe é utilizada da seguinte forma
< botão tipo = 'botão' classe = 'btn btn-warning btn-block' >botão< / botão >< botão tipo = 'botão' classe = 'btn btn-secundário btn-bloco' >botão< / botão >
Saída
Como criar botões de estado ativo no Bootstrap?
Os botões de estado ativo referem-se aos botões que estão ativos no momento. Esses botões são um pouco mais escuros do que o normal. Para criar tais botões, o Bootstrap “ ativo ” classe é utilizada.
Exemplo
O código abaixo cria dois botões. O primeiro está no estado normal enquanto o outro é aplicado com o “ ativo ' classe:
< botão tipo = 'botão' classe = 'btn btn-sucesso' >Sucesso< / botão >< botão tipo = 'botão' classe = 'btn btn-sucesso ativo' >Sucesso< / botão >
Saída
Como criar botões de estado desativado no Bootstrap?
Os botões de estado desativado referem-se aos botões que não podem ser clicados e inutilizados. No Bootstrap, o “ Desativado ” é utilizada para criar um botão de estado desabilitado. O ' Desativado ” atributo também pode ser usado para esta finalidade.
Exemplo
Confira o exemplo fornecido abaixo:
- O primeiro botão não está em um estado desabilitado.
- A segunda utiliza o “ Desativado ” para criar um botão de estado desabilitado.
- O terceiro usa o “ Desativado ” atributo:
< botão tipo = 'botão' classe = 'btn btn-sucesso desativado' >Sucesso< / botão >
< botão tipo = 'botão' classe = 'btn btn-sucesso' desabilitado>Sucesso< / botão >
Saída
Cobrimos diferentes aspectos relacionados aos botões Bootstrap e seu estilo em CSS.
Conclusão
O ' btn ” é utilizada para criar botões Bootstrap com um design simples. Para criar botões coloridos e de contorno, o botão “ btn-* ' e ' btn-outline-* ” classes são utilizadas onde o “ * ” simboliza qualquer classe de cor. Por exemplo, ' btn-aviso ” cria um botão amarelo, “ btn-outline-warning ” cria um botão com contorno amarelo e muito mais. Para ativar ou desativar os botões, são aplicadas as classes “ativo” e “desativado”, respectivamente. Esta postagem forneceu um guia abrangente sobre os botões do Bootstrap.