En este artículo, aprenderemos sobre Bulma Checkbox , con algunos de sus ejemplos. Bulma es un marco gratuito y de código abierto que se utiliza para crear componentes reutilizables mientras se crean aplicaciones web. Este marco es un marco listo para dispositivos móviles con el que los usuarios pueden ver las aplicaciones web como una aplicación móvil.
Las casillas de verificación permiten a los usuarios seleccionar varias opciones de una lista de opciones. Para usar la casilla de Bulma, tenemos que usar diferentes clases. La clase es un contenedor simple alrededor del elemento <input> en HTML. El estilo de la casilla de verificación no está predefinido, el desarrollador puede cambiar el estilo en consecuencia para obtener la mejor experiencia de usuario.
Clase de casilla de verificación de Bulma:
- Casilla de verificación simple en Bulma: para usar una casilla de verificación simple en su aplicación web HTML, simplemente use la clase «casilla de verificación» en el elemento <input>.
- Casilla de verificación deshabilitada en Bulma: para usar una casilla de verificación deshabilitada en su aplicación web HTML, simplemente use el atributo «deshabilitado» después de la clase «casilla de verificación» en el elemento <input>.
- CheckBox con enlaces en Bulma: Para usar enlaces con sus casillas de verificación en la aplicación web, simplemente agregue una etiqueta <a>.
Sintaxis:
<label>
<input type="checkbox">
...
</label>
Ejemplo: El siguiente ejemplo muestra todos los tipos de casillas de verificación en Bulma:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </head> <body> <section class="section" id="simple"> <div class="container"> <h1 class="title">Basic checkbox</h1> <label class="checkbox"> Are you a Geek? <input type="checkbox" /> </label> <br> <h1 class="title">Disabled checkbox</h1> <label class="checkbox"> Are you a Geek? <input type="checkbox" disabled /> </label> <br> <h1 class="title">Checkbox with Link</h1> <label class="checkbox"> <input type="checkbox" /> Hey Geek! <a href="#">Check this out.</a> </label> </div> </section> </body> </html>
Producción:
Casilla de Bulma
Referencia: https://bulma.io/documentation/form/checkbox
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA