Introdução à caixa de seleção no Bootstrap
O Bootstrap usou muitos botões com um clique, mas às vezes precisamos escolher uma opção. A opção de escolha tem duas maneiras: uma é o botão de opção e a outra é uma caixa de seleção. O botão de opção tem apenas uma opção para escolher entre outras. Em qualquer condição, precisamos escolher mais de uma opção que seja a caixa de seleção de horário em funcionamento. A caixa de seleção possui várias opções para escolher entre as várias opções. A caixa de seleção é usada para escolher opções em várias opções com um clique na caixa de seleção. O uso dos botões da caixa de seleção é uma questão de múltipla escolha no exame quando a pergunta tem várias respostas para uma pergunta. O Bootstrap possui a própria classe de botão da caixa de seleção, você verá abaixo.
Exemplos para implementar a caixa de seleção no Bootstrap
Os usuários podem entender como implementar uma caixa de seleção e o funcionamento desses botões. Abaixo estão os exemplos para implementar a caixa de seleção no Boostrap:
- Caixa de seleção vertical
- Caixa de seleção embutida
1. Caixa de seleção vertical
Exemplo de caixa de seleção vertical é fornecido a seguir.
Código:
Bootstrap Example vertical checkbox
Exemplo 1 da caixa de seleção
Quais são as sete maravilhas da lista a seguir?
Taj Mahal
Pirâmide do Egito
Ponte de Londres
Torre Eiffel
Resultado:
Descrição:
- Você pode ver o exemplo acima da caixa de seleção vertical. Essa é uma caixa de seleção padrão e não precisa de nenhuma classe ou entidade especial.
- Toda entidade do formulário ocorre verticalmente, um por um.
- Isso é usado principalmente em exames de perguntas de múltipla escolha para conhecer as opções claramente e não confundir com a caixa de seleção e o rótulo. Todo mundo usa a classe de caixa de seleção com etiqueta. Para pergunta usa a entidade de parágrafo
.
- Você pode clicar no botão da caixa de seleção, depois de clicar na marca de seleção do botão tornar-se visível.
2. Caixa de seleção embutida
Exemplo de caixa de seleção embutida é dado a seguir.
Código:
Bootstrap Example inline checkbox
Exemplo 2 da caixa de seleção
hobbies:
pintura
dançando
lendo
Resultado:
Descrição:
- O exemplo acima é uma caixa de seleção embutida. Precisamos usar a classe form-inline para que outras pessoas formem uma entidade que mostre inline no formulário.
- Para a caixa de seleção embutida, classe caixa de seleção embutida necessária com todos os rótulos.
- Se você quiser usar a caixa de seleção de qualquer forma com outras entradas, também será útil uma caixa de seleção embutida.
- Toda a caixa de seleção vem em uma linha.
- Você pode clicar no botão da caixa de seleção, depois de clicar na marca de seleção do botão tornar-se visível.
Caixa de seleção usando botões
A caixa de seleção no bootstrap também funcionou com os botões com algumas classes para parecer mais estiloso e elegante. Classe botão-grupo-alternar, classe de botão deve ser usada em e respectivamente. Com a classe button-group-toggle, a classe data-toggle = 'buttons' também é necessária no formulário. No, o tipo deve ser uma caixa de seleção para funcionar como a caixa de seleção. Vamos ver alguns exemplos para entender mais sobre alternar na caixa de seleção usando a inicialização.
Código:
Bootstrap Example checkbox
Languages
HTML
CSS
JavaScript
Bootstrap
Resultado:
Descrição:
- Neste exemplo, usamos o botão principal, mas qualquer botão pode ser usado para efetuar o checkout, mas o 'preenchimento automático' deve estar desativado para não salvar dados extras.
- Se o usuário pressionar o botão, ele será automaticamente escolhido como opção e, no botão de alternância, o usuário poderá escolher mais opções clicando nos botões.
- Aqui temos quatro opções para escolher os idiomas, os usuários podem escolher vários idiomas.
- class = 'btn-group-toggle' é usado para estilizar a entrada do formulário.
- Como essa alternância de dados, o JavaScript permite alternar para os botões para que o modo Ativo e não ativo possa ser interpretado.
Usando o botão ativo da caixa de seleção no Bootstrap
Se a classe ativa do usuário adicionar o botão, esse botão será automaticamente verificado e os usuários terão opções restantes para escolher. Este botão muda a cor para obter o sinal ativado.
Vamos ver o seguinte exemplo:
Código:
Languages
HTML
CSS
Javascript
Bootstrap
Resultado:
Descrição:
- Este exemplo pode reconhecer o botão HTML mais escuro que outros, o que significa que esse botão já está ativo.
- No HTML, adicione a classe ativa com o botão principal.
- Este exemplo também precisa de alternância de botão = "botões" em vez de um botão, devido ao grupo do botão.
Conclusão
A caixa de seleção é útil Se o trabalho tiver várias opções para escolher para uma condição. O usuário pode selecionar mais de uma opção necessária para a tarefa. Caixa de seleção A seleção significa Sim ou Não marcado significa não. É possível selecionar no mínimo duas condições mútuas usando uma caixa de seleção.
Artigo recomendado
Este é um guia para a caixa de seleção no Bootstrap. Aqui discutimos a introdução à caixa de seleção no Bootstrap e seus exemplos junto com a implementação de código. Você também pode consultar nossos outros artigos sugeridos para saber mais -
- Componentes diferentes de inicialização
- Layout de inicialização com tipos
- Flexbox vs Bootstrap | Top 10 Comparação
- As 10 principais perguntas da entrevista com o Bootstrap