Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
El componente de ‘entrada’ de un formulario no tiene un aspecto tan atractivo. Usando Bulma podemos diseñar elementos de entrada del formulario de una manera mucho mejor simplemente agregando algunas clases Bulma simples. Los elementos de entrada Bulma están disponibles en diferentes colores, diferentes estilos, diferentes tamaños y diferentes estados.
Ejemplo 1: Este ejemplo ilustra la entrada simple de Bulma.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Input</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns
{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<input class="input"
type="text"
placeholder='Normal Input'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo ilustra la entrada de un formulario coloreado.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Input</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<input class="input is-primary"
type="text"
placeholder='Primary color Input'>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-link"
type="text"
placeholder='Link color Input'>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-info"
type="text"
placeholder='Info color Input'>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-success"
type="text"
placeholder='success color Input'>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-warning"
type="text"
placeholder='Warning color Input'>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-danger"
type="text"
placeholder='Danger color Input'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo ilustra la entrada de formularios de diferentes tamaños.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Input</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<input class="input is-small"
type="text"
placeholder='Small input'>
</div>
</div>
<div class="field">
<div class="control">
<input class="input"
type="text"
placeholder='Normal Input'>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-medium"
type="text"
placeholder='Medium Input'>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-large"
type="text"
placeholder='Large Input'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo ilustra diferentes estados de entrada de formulario.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Input</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<input class="input" type="text"
placeholder='Normal Input'>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-hovered"
type="text"
placeholder='Hovered Input'>
</div>
</div>
<div class="field">
<div class="control">
<input class="input is-focused"
type="text"
placeholder='Focused Input'>
</div>
</div>
<div class="field">
<div class="control is-loading">
<input class="input" type="text"
placeholder="Loading input">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo ilustra la entrada de un formulario con iconos impresionantes de fuentes.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Input</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control has-icons-left">
<input class="input"
type="text"
placeholder="Username">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<input class="input"
type="password"
placeholder="Password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 6: Este ejemplo ilustra el tipo redondeado de entradas de formulario.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Input</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control has-icons-left">
<input class="input is-rounded"
type="text"
placeholder="Username">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<input class="input is-rounded"
type="password"
placeholder="Password">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción :
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA