El interruptor de palanca Bootstrap es un componente simple que se utiliza para activar una de las dos opciones dadas. Comúnmente utilizado como un botón de encendido/apagado.
El marco CSS es una biblioteca que permite un diseño web más fácil y más compatible con los estándares utilizando el lenguaje de hojas de estilo en cascada. Bootstrap 4 es uno de esos marcos CSS ampliamente utilizados por los desarrolladores web para crear aplicaciones web interactivas fáciles de usar. Bootstrap junto con JavaScript ayuda a desarrollar una interfaz de usuario receptiva.
Acercarse:
- Bootstrap tiene un atributo de alternancia de datos incorporado que se usa para alternar elementos de Bootstrap.
- Aquí se utiliza el método bootstrapToggle() para realizar la tarea. El método bootstrapToggle() permite alternar el interruptor. Si el interruptor está deshabilitado y el usuario hace clic en la casilla de verificación, entonces cambia a un estado habilitado. Si la casilla de verificación está habilitada, el método bootstrapToggle() la cambia al estado deshabilitado.
El fragmento de código a continuación muestra un interruptor de palanca usando JavaScript.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery.min.js">
</script>
<script src=
"https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js">
</script>
<link href=
"https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css"
rel="stylesheet"/>
</head>
<body>
<div class="container mt-5">
<!--Initialize toggles with id toggle-one
with JavaScript.-->
<input type="checkbox" id="toggle-one">
<script>
$(function() {
$('#toggle-one').bootstrapToggle({
on: 'Enabled',
off: 'Disabled'
});
})
</script>
</div>
</body>
</html>
Producción:
Enfoque alternativo:
- El interruptor también se puede alternar usando botones individuales que, al hacer clic, activan una función de JavaScript.
- La función de JavaScript activa o desactiva el interruptor según el estado anterior del interruptor.
- Aquí, el método toggleOn() activa el interruptor mientras que el método toggleOff() lo desactiva.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery.min.js">
</script>
<script src=
"https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js">
</script>
<link href=
"https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css"
rel="stylesheet"/>
</head>
<body>
<div class="container mt-5">
<input id="toggle-trigger" type="checkbox"
data-toggle="toggle">
<button class="btn btn-success" onclick="toggleOn()">
On Button
</button>
<button class="btn btn-danger" onclick="toggleOff()">
Off Button
</button>
</div>
<script>
function toggleOn() {
$('#toggle-trigger').bootstrapToggle('on')
}
function toggleOff() {
$('#toggle-trigger').bootstrapToggle('off')
}
</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