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 llevar a cabo su diseño.
El componente ‘seleccionar’ de un formulario no tiene un aspecto tan atractivo. Usando Bulma podemos diseñar elementos seleccionados del formulario de una manera mucho mejor simplemente agregando algunas clases Bulma simples. Los elementos selectos de Bulma están disponibles en diferentes colores, diferentes estilos, diferentes tamaños y diferentes estados.
Ejemplo 1: este ejemplo muestra una lista desplegable simple de Bulma.
<html>
<head>
<title>Bulma Select</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="select">
<select>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
<option>
Take pictures of
beautiful flowers
</option>
</select>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo muestra un menú desplegable de selección de diferentes colores.
`
<html>
<head>
<title>Bulma Select</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;
}
div.select{
margin-bottom :3px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="select is-primary">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
</select>
</div>
<div class="select is-link">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
</select>
</div>
<div class="select is-info">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
</select>
</div>
<div class="select is-success">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
</select>
</div>
<div class="select is-warning">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
</select>
</div>
</div>
<div class='column is-5'>
<div class="select is-danger">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
</select>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo muestra el menú desplegable «desplazable» o «de selección múltiple».
<html>
<head>
<title>Bulma Select</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;
}
div.select{
margin-bottom :3px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="select is-multiple">
<select multiple size='6'>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
<option>
Take pictures of
beautiful flowers
</option>
<option>
Ride to a horse and write
your experience
</option>
<option>
Watch movie 'Godfather' at night
</option>
<option>Go for a trip with bike</option>
<option>Buy a sumsung headset</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: este ejemplo muestra un menú desplegable de selección de diferentes tamaños.
<html>
<head>
<title>Bulma Select</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;
}
div.select{
margin-bottom :3px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="select is-small">
<select>
<option>Todos(Small)</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
</select>
</div>
<div class="select">
<select>
<option>Todos(Normal)</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
</select>
</div>
<div class="select is-medium">
<select>
<option>Todos(Medium)</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
</select>
</div>
<div class="select is-large">
<select>
<option>Todos(Large)</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce
project to build
</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: este ejemplo muestra un menú desplegable de selección redondeado.
<html>
<head>
<title>Bulma Select</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;
}
div.select{
margin-bottom :3px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="select is-rounded is-primary">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce project to build
</option>
</select>
</div>
<div class="select is-rounded is-link">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce project to build
</option>
</select>
</div>
<div class="select is-rounded is-info">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce project to build
</option>
</select>
</div>
<div class="select is-rounded is-success">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce project to build
</option>
</select>
</div>
<div class="select is-rounded is-warning">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce project to build
</option>
</select>
</div>
<div class="select is-rounded is-danger">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce project to build
</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 6: Este ejemplo muestra el menú desplegable de selección con iconos de «fuente impresionante».
<html>
<head>
<title>Bulma Select</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;
}
div.select{
margin-bottom :3px;
}
</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="control has-icons-left">
<div class="select">
<select>
<option>Todos</option>
<option>
Design a custom database to
store your daily activity
</option>
<option>
Start your E-commerce project to build
</option>
<option>
Take pictures of beautiful flowers
</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-th-list"></i>
</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