Bulma es un marco CSS gratuito y de código abierto que se utiliza para crear sitios web hermosos y receptivos. Las clases de Bulma Select Size se utilizan para establecer el tamaño del menú desplegable de selección. El elemento seleccionado tiene 4 tamaños diferentes: pequeño, normal, mediano y grande .
Seleccionar clases de tamaño:
- is-small: esta clase se usa para establecer el tamaño de selección en pequeño.
- is-normal: esta clase establece el tamaño seleccionado en normal.
- is-medium: esta clase se utiliza para establecer el tamaño seleccionado en medio.
- is-large: esta clase se usa para establecer el tamaño de selección en grande.
Sintaxis:
<div class="select is-normal"> <select> <option selected>Algorithms</option> <option>Data Structures</option> </select> </div>
Ejemplo: El siguiente ejemplo muestra el uso de clases de tamaño seleccionadas en Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Select Sizes</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.container>div{
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Select Sizes</b>
<div class="container">
<div>
<span>Small Size:</span>
<div class="select is-small">
<select>
<option selected>Select dropdown</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
</div>
<div>
<span>Normal Size:
</span>
<div class="select is-normal">
<select>
<option selected>Select dropdown</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
</div>
<div>
<span>Medium Size: </span>
<div class="select is-medium">
<select>
<option selected>Select dropdown</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
</div>
<div>
<span>Large Size:
</span>
<div class="select is-large">
<select>
<option selected>Select dropdown</option>
<option>Data Structures</option>
<option>Algorithms</option>
<option>DBMS</option>
</select>
</div>
</div>
</div>
</body>
</html>
Producción:
Bulma Seleccionar Tallas
Referencia: https://bulma.io/documentation/form/select/#sizes