Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Bulma Input Size se usa para establecer el tamaño de los campos de entrada. Hay cuatro tamaños de entrada diferentes disponibles en Bulma que son pequeño, mediano, normal y grande . Puede establecer el tamaño de entrada utilizando una de las clases proporcionadas por Bulma. El tamaño predeterminado de un campo de entrada es normal .
Clases de tamaño de entrada de Bulma:
- is-small: se utiliza para establecer el tamaño del campo de entrada en pequeño.
- is-normal: se utiliza para establecer el tamaño del campo de entrada en normal.
- is-medium: se utiliza para establecer el tamaño del campo de entrada en medio.
- is-large: se utiliza para establecer el tamaño del campo de entrada en grande.
Ejemplo: Este ejemplo demuestra las clases de tamaño de entrada de Bulma.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Input Sizes</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-1 has-text-success"> GeeksforGeeks </h1> <p class="is-size-3">Bulma Input Sizes</p> <div class="container"> <input class="input is-small" type="text" placeholder="Small size input field"> <br><br> <input class="input is-normal" type="number" placeholder="Normal size input field"> <br><br> <input class="input is-medium" type="number" placeholder="Medium size input field"> <br><br> <input class="input is-large" type="password" placeholder="Large size input field"> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/form/input/#sizes