Casilla de verificación en Bootstrap - Ejemplos para implementar la casilla de verificación en Bootstrap

• Introducción a Checkbox en Bootstrap
• Casilla de verificación Ejemplo 1
• Casilla de verificación Ejemplo 2

Introducción a Checkbox en Bootstrap

Bootstrap utilizó muchos botones con un solo clic, pero a veces tenemos que elegir una opción. Elegir la opción tiene dos formas: una es un botón de opción y otra es una casilla de verificación. El botón de opción solo tiene una opción para elegir entre otras. En cualquier condición, debemos elegir más de una opción que funcione en la casilla de verificación de tiempo. La casilla de verificación tiene múltiples opciones para elegir entre las muchas opciones. La casilla de verificación se utiliza para elegir opciones en múltiples opciones con un clic en la casilla de verificación. El uso de botones de casilla de verificación es preguntas de opción múltiple en el examen cuando la pregunta tiene múltiples respuestas a una pregunta. Bootstrap tiene su propia clase de botón de casilla de verificación, verá a continuación.

Ejemplos para implementar la casilla de verificación en Bootstrap

Los usuarios pueden entender cómo implementar una casilla de verificación y el funcionamiento de estos botones. A continuación se muestran los ejemplos para implementar la casilla de verificación en Boostrap:

1. Casilla de verificación vertical
2. Casilla de verificación en línea

1. Casilla de verificación vertical

Ejemplo de casilla de verificación vertical se da a continuación.

Código:



Bootstrap Example vertical checkbox





Casilla de verificación Ejemplo 1

¿Cuáles son las siete maravillas en la siguiente lista?

Taj Mahal

Pirámide de egipto

Puente de Londres

Torre Eiffel

Salida:

Descripción:

• Puede ver el ejemplo anterior de la casilla de verificación vertical. Esta es una casilla de verificación predeterminada y no necesita ninguna clase o entidad especial.
• Toda entidad de forma viene verticalmente una por una.
• Esto se usa principalmente en exámenes de preguntas de opción múltiple para conocer las opciones claramente y no confundirse con la casilla de verificación y la etiqueta. Todos usan la clase de casilla de verificación con etiqueta. Para preguntas utiliza la entidad de párrafo

  .

• Puede hacer clic en el botón de casilla de verificación, después de hacer clic en el botón, la marca de verificación se hace visible.

2. Casilla de verificación en línea

Ejemplo de casilla de verificación en línea se da a continuación.

Código:



Bootstrap Example inline checkbox





Casilla de verificación Ejemplo 2

aficiones:
pintura

bailando

leyendo

Salida:

Descripción:

• El ejemplo anterior es una casilla de verificación en línea. Necesitamos usar la clase form-inline para que otros formen una entidad que muestre inline in form.
• Para la casilla de verificación en línea, se requiere clase checkbox-inline con cada etiqueta.
• Si desea utilizar la casilla de verificación en cualquier forma con otras entradas también esa vez es útil una casilla de verificación en línea.
• Toda la casilla de verificación viene en una línea.
• Puede hacer clic en el botón de casilla de verificación, después de hacer clic en el botón, la marca de verificación se hace visible.

Casilla de verificación con botones

La casilla de verificación en bootstrap también funcionó con los botones con algunas clases para lucir más elegante y elegante en forma. Clase button-group-toggle, la clase de botón debe usarse en y respectivamente. Con la clase button-group-toggle, la clase data-toggle = 'buttons' también es necesaria en el formulario. En el, el tipo debe ser una casilla de verificación para trabajar como la casilla de verificación. Veamos algunos ejemplos para entender más sobre alternar en la casilla de verificación usando bootstrap.

Código:



Bootstrap Example checkbox




Languages

HTML

CSS

JavaScript

Bootstrap




Salida:

Descripción:

• Para este ejemplo, utilizamos el botón primario, pero cualquier botón se puede usar para pagar, pero 'autocompletar' debe estar desactivado para no guardar datos adicionales.
• Si el usuario presiona el botón, se elige automáticamente como una opción y en el botón de alternancia, el usuario puede elegir más opciones simplemente haciendo clic en los botones.
• Aquí tenemos cuatro opciones para elegir los idiomas, los usuarios pueden elegir varios idiomas.
• class = 'btn-group-toggle' se usa para aplicar estilo al ingreso del formulario.
• Debido a esta alternancia de datos, JavaScript permite alternar a los botones para que se pueda interpretar el modo activo y no activo.

Uso del botón activo de casilla de verificación en Bootstrap

Si la clase activa del usuario agrega el botón, este botón se marca automáticamente y los usuarios tienen opciones restantes para elegir. Este botón cambia el color para obtener el signo activado.

Veamos el siguiente ejemplo:

Código:


Languages