Bootstrap es una opción popular entre los desarrolladores web para crear diseños de páginas web interactivas. Bootstrap ha recorrido un largo camino con múltiples lanzamientos y contenido enriquecido con cada nuevo lanzamiento. Bootstrap tiene una amplia comunidad que también ha contribuido con paquetes más nuevos que han facilitado el trabajo con Bootstrap. En este artículo, nos ocuparemos de cambiar el color de fondo del interruptor de palanca en Bootstrap 4. Bootstrap 4 proporciona una clase de interruptor personalizado de forma predeterminada que se usa para crear un interruptor de palanca y la clase de entrada de control personalizado se ocupa del color de fondo. y el color del borde del interruptor. En Bootstrap 4, el color de fondo del interruptor de palanca es azul. Este color se puede cambiar manipulando la clase de entrada de control personalizado. Existe otro método para cambiar el color utilizando bibliotecas externas con una amplia gama de clases de color.
Primer enfoque
Este enfoque crea el interruptor de palanca utilizando la clase de interruptor personalizado predefinida y el color se modifica especificando el color requerido en las clases de entrada de control personalizado. Este método incluye una gran cantidad de codificación, ya que se debe repetir todo el código para un color diferente. Esto lo hace engorroso.
Implementación de código
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet"
type="text/css"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<style>
.custom-control-input:focus ~
.custom-control-label::before {
/* when the button is toggled off
it is still in focus and a violet border will appear */
border-color: violet !important;
/* box shadow is blue by default
but we do not want any shadow hence we have set
all the values as 0 */
box-shadow:
0 0 0 0rem rgba(0, 0, 0, 0) !important;
}
/*sets the background color of
switch to violet when it is checked*/
.custom-control-input:checked ~
.custom-control-label::before {
border-color: violet !important;
background-color: violet !important;
}
/*sets the background color of
switch to violet when it is active*/
.custom-control-input:active ~
.custom-control-label::before {
background-color: violet !important;
border-color: violet !important;
}
/*sets the border color of switch
to violet when it is not checked*/
.custom-control-input:focus:
not(:checked) ~ .custom-control-label::before {
border-color: violet !important;
}
</style>
</head>
<body>
<!--main container which contains
the web elements-->
<div class="container mt-5">
<div class="custom-control custom-switch">
<input type="checkbox"
class="custom-control-input"
id="customSwitch1" />
<label class="custom-control-label"
for="customSwitch1">
Toggle this switch</label>
</div>
</div>
</body>
</html>
Producción
Segundo enfoque
El segundo método elimina los esfuerzos adicionales necesarios en el primer método para especificar los cambios de color para todas y cada una de las clases de entrada de control personalizado. Este es un enfoque mejor y más sofisticado, ya que no incluye una codificación extensa. El método utiliza el paquete Bootstrap Switch Button disponible en Github. Es una biblioteca de código abierto y funciona con todos los componentes de Bootstrap 4. Esta biblioteca tiene clases predefinidas que nos ayudan a definir un color para el interruptor de palanca. El atributo data-onstyle de la etiqueta de entrada es responsable de establecer el color del interruptor de palanca. Las opciones de color disponibles son similares a los botones en Bootstrap 4. El atributo de alternancia de datos especifica que la casilla de verificación es un botón de cambio y el atributo de ancho de datos especifica el ancho del interruptor de alternancia.
Implementación de código
<!DOCTYPE html> <html> <head> <title>Toggle switch</title> <!--import Bootstrap Switch Button package using cdn--> <link href= "https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/css/bootstrap-switch-button.min.css" rel="stylesheet" /> <!--import Bootstrap 4 using cdn--> <link rel="stylesheet" type="text/css" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> </head> <body> <!--main container which contains the web elements--> <div class="container mt-5"> <input type="checkbox" data-toggle="switchbutton" checked data-width="100" data-onstyle="primary" /> <input type="checkbox" data-toggle="switchbutton" checked data-width="100" data-onstyle="secondary" /><br /> <br /> <input type="checkbox" data-toggle="switchbutton" checked data-width="100" data-onstyle="success" /> <input type="checkbox" data-toggle="switchbutton" checked data-width="100" data-onstyle="danger" /><br /> <br /> <input type="checkbox" data-toggle="switchbutton" checked data-width="100" data-onstyle="warning" /> <input type="checkbox" data-toggle="switchbutton" checked data-width="100" data-onstyle="info" /><br /> <br /> <input type="checkbox" data-toggle="switchbutton" checked data-width="100" data-onstyle="light" /> <input type="checkbox" data-toggle="switchbutton" checked data-width="100" data-onstyle="dark" /> </div> <!--javascript cdn--> <script src= "https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/dist/bootstrap-switch-button.min.js"> </script> </body> </html>
Producción
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA