Bootstrap Select es un control de formulario que muestra una lista plegable de diferentes valores que se pueden seleccionar. Esto se puede utilizar para mostrar formularios o menús al usuario. Este artículo muestra los métodos mediante los cuales se puede diseñar un elemento <select> en Bootstrap, usando estilos personalizados y bootstrap-select .
Uso de los estilos personalizados predeterminados: Bootstrap tiene estilos personalizados que se pueden aplicar a algunos elementos de formulario. Los menús de selección personalizados requieren solo una clase personalizada, es decir, .custom-select para activar los estilos personalizados. Sin embargo, los estilos personalizados están restringidos a la apariencia inicial de la selección y no pueden alterar la opción debido a la limitación del navegador. El siguiente ejemplo representa cómo se puede diseñar el elemento predeterminado <select> usando .custom-select en Bootstrap.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://kit.fontawesome.com/577845f6a5.js" crossorigin="anonymous"> </script> <!-- Optional JavaScript --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"> </script> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <!-- Use the custom-select class --> <select class="custom-select" style="width:150px;"> <option>Pizzas</option> <option>Burger</option> <option>Ice Cream</option> <option>Fried Potatoes</option> </select> </body> </html>
Producción:
Solo hay algunas propiedades de estilo que se pueden aplicar al componente <opción> . Esto se debe a que este tipo de componente es un caso de «componente reemplazado». Dependen del sistema operativo y no son parte del HTML/navegador. No se puede diseñar a través de CSS. A excepción de background-color y color , la configuración de estilo aplicada a través del objeto de estilo para el componente <option> no se tiene en cuenta.
La opción de selección está diseñada por el sistema operativo, no por HTML. Por lo tanto, el estilo CSS no tiene ningún impacto.
option {
background-color: color;
border-radius: value;
font-size: value
}
En general, los valores anteriores funcionarán. Sin embargo, no podemos personalizar el relleno, el margen y otras propiedades.
Bootstrap-select: para resolver los problemas anteriores, se puede usar bootstrap-select para aplicar estilo a las etiquetas <option> y <select>.
Nota: De forma predeterminada, bootstrap-select reconoce naturalmente la versión de Bootstrap que se está utilizando. Sin embargo, hay algunos casos en los que la detección de versión puede no funcionar.
El siguiente ejemplo muestra cómo se puede incluir e inicializar bootstrap-select en la página. La clase selectpicker se usa en los componentes de selección para inicializar automáticamente bootstrap-select como se explica en el ejemplo:
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> </script> <!-- CDN link used below is compatible with this example --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"> </script> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <select class="selectpicker" data-style="btn-success"> <option>Pizzas</option> <option>Burger</option> <option>Ice Cream</option> <option>Fried Potatoes</option> </select> </body> </html>
Producción:
A continuación se muestran algunos atributos que se pueden usar para aplicar estilo a la etiqueta < select > :
- data-live-search: Nos permite agregar una entrada de búsqueda.
- data-tokens: Nos permite agregar palabras clave a las opciones para mejorar su capacidad de búsqueda.
- data-max-options: Nos permite especificar el límite del número de opciones que se pueden seleccionar. También funciona para grupos de opciones.
- título: este atributo nos permite establecer el texto de marcador de posición predeterminado cuando no se selecciona nada.
- estilo de datos: este atributo nos ayuda a diseñar las clases de botones.
- show-tick: este atributo nos ayuda a mostrar el icono de marca de verificación en los cuadros de selección estándar.
- ancho de datos: este atributo nos ayuda a establecer el ancho de la selección.
A continuación se muestran algunos atributos que se pueden usar para diseñar la etiqueta <option> :
- data-icon: Se utiliza para agregar un icono a una <opción> o <optgroup>.
- contenido de datos: se utiliza para insertar HTML personalizado en la <opción>.
- data-subtext: Se utiliza para agregar un subtexto a un elemento <option> o <optgroup>.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> </script> <!-- CDN link used below is compatible with this example --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"> </script> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <!-- Using the attributes to style the <select> and <option> tag --> <select class="selectpicker"> <option data-content= "<span class='badge badge-danger'>Pizzas</span>"> Pizzas </option> <option data-content= "<span class='badge badge-success'>Burger</span>"> Burger </option> <option data-content= "<span class='badge badge-primary'>Ice Cream</span>"> Ice Cream </option> <option data-content= "<span class='badge badge-warning'>Fried Potatoes</span>"> Fried Potatoes </option> </select> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por swapnitanerkar28 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA