Bulma es un marco receptivo de código abierto para CSS basado en Flexbox y es completamente gratuito. Las principales características de este marco son que es muy compatible, está bien documentado y es rico en componentes. Para propósitos de diseño, Bulma usa clases.
El marco de trabajo de Bulma admite y permite a los usuarios crear formularios utilizando los controles de formulario de Bulma . El marco admite elementos de HTML <form> , <button> , <input> , <textarea> y <label> . El usuario puede crear un formulario completo con Bulma, ya que proporciona el mejor diseño de interfaz de usuario. Bulma usa un contenedor de control para mantener el flujo del formulario. Utiliza la clase de campo como un contenedor para agregar espacios iguales entre los elementos del formulario. Hay varias clases utilizadas en los controles de formulario y se analizan a continuación.
Clases de forma de Bulma:
- campo: Es un contenedor en el que se utiliza la etiqueta, el control, etc. para crear un formulario.
- control: esta clase se utiliza como un contenedor de bloques que consta de elementos de entrada, nivel, área de texto y selección.
- etiqueta: esta clase se utiliza para agregar una etiqueta para un elemento de entrada.
- entrada: esta clase se utiliza para obtener la entrada de texto del usuario.
- textarea: esta clase se utiliza para obtener una entrada de texto grande del usuario.
- seleccionar: esta clase se utiliza para seleccionar una opción de una lista en un menú desplegable.
- radio: esta clase se usa para agregar botones de radio en forma de Bulma.
- botón: esta clase se usa para agregar botones en forma de Bulma.
- casilla de verificación: esta clase se usa para agregar una casilla de verificación en el formulario de Bulma para seleccionar entradas de opciones múltiples.
Variable utilizada:
- $label-color: Esta variable se utiliza para definir el color de la etiqueta.
- $label-weight: Esta variable se utiliza para definir el peso de la etiqueta.
- $help-size: Esta variable se utiliza para definir el tamaño de la etiqueta.
Ejemplo 1: en el siguiente código, utilizaremos una de las variables anteriores para demostrar el uso de form. Esto usa la variable $label-color .
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="style.css"> <!-- font-awesome cdn --> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> </script> </head> <body> <center> <div class="container box p-6 "> <h1 class="title has-text-centered"> GeeksforGeeks </h1> <h2 class="subtitle has-text-centered"> Sign Up Form </h2> <form action=""> <div class="field"> <label class="label">Username</label> <div class="control has-icons-left has-icons-right"> <input class="input is-success" type="text" placeholder="Enter your username"/> <span class="icon is-small is-left"> <i class="fas fa-user"></i> </span> </div> </div> <div class="field"> <label class="label">Password</label> <div class="control has-icons-left has-icons-right"> <input class="input is-danger" type="password" placeholder="Enter your password"/> <span class="icon is-small is-left"> <i class="fas fa-key"></i> </span> </div> </div> <div class="field"> <label class="label">Choose your Course </label> <div class="control"> <div class="select"> <select> <option>Java</option> <option>C++</option> <option>Python</option> </select> </div> </div> </div> <div class="field"> <label class="label"> Something Else </label> <div class="control"> <textarea class="textarea" placeholder="Want to tell anything?"> </textarea> </div> </div> <div class="field"> <div class="control"> <label class="checkbox"> <input type="checkbox" /> I agree to the <a href="#"> terms and conditions </a> </label> </div> </div> <div class="field"> <div class="control"> <label class="radio"> <input type="radio" name="question" /> Yes </label> <label class="radio"> <input type="radio" name="question" /> No </label> </div> </div> <div class="field is-grouped"> <div class="control"> <button class="button is-success"> Sign up </button> </div> <div class="control"> <button class="button is-link is-light"> Cancel </button> </div> </div> </form> </div> </center> </body> </html>
Código SCSS:
$label-color:green;
.title {
color:$label-color;
}
Código CSS compilado:
.title {
color: green; }
Producción:
Ejemplo 2: en el siguiente código, utilizaremos una de las variables anteriores para demostrar el uso de form.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <link rel="stylesheet" href="style.css"> <!-- font-awesome cdn --> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> </script> </head> <body> <center> <div class="container box p-6 "> <h1 class="title has-text-centered has-text-success"> GeeksforGeeks </h1> <h3 class="subtitle has-text-centered"> A computer science portal for geeks. </h3> <form action=""> <div class="field"> <label class="label">First Name</label> <div class="control"> <input class="input" type="text" placeholder="Enter your name" /> </div> </div> <div class="field"> <label class="label">Last Name</label> <div class="control"> <input class="input" type="text" placeholder="Enter your name" /> </div> </div> <div class="field is-grouped"> <div class="control"> <button class="button is-success"> Ok </button> </div> <div class="control"> <button class="button is-link is-light"> Cancel </button> </div> </div> </form> </div> </center> </body> </html>
Código SCSS:
$label-color:lightgreen;
body {
background-color:$label-color;
}
Código CSS compilado:
body {
background-color: lightgreen;
}
Producción:
Referencia: https://bulma.io/documentation/form/general/