Caixa de seleção no Bootstrap - Exemplos para implementar a caixa de seleção no Bootstrap

• Introdução à caixa de seleção no Bootstrap
• Exemplo 1 da caixa de seleção
• Exemplo 2 da caixa de seleção

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:

1. Caixa de seleção vertical
2. 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