Originalmente creé una aplicación web en HTML, CSS y JavaScript, luego me pidieron que la creara nuevamente en Bootstrap. Lo he hecho todo bien, pero tenía botones de alternancia en la aplicación web que han cambiado a botones de radio (originalmente casilla de verificación) en lugar de los botones de alternancia que tenía originalmente.

El código de los botones es:

<label>
  Notifications
  <span class='toggle'>
    <input type='radio'
      class='notifications'
      name='notifications'
      id='notifications' />
  </span>
</li>
<label>
  Preview
  <span class='toggle'>
    <input type='radio'
      class='preview'
      name='preview'
      id='preview' />
  </span>
</li>

y los archivos JavaScript y CSS a los que está vinculada la página HTML son:

<script src = 'jqtouch.js'></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

¿Hay alguna forma de cambiar el código para poder recuperar el botón de alternancia?

Respuesta inicial de 2013

Hay disponible un excelente Bootstrap Switch (no oficial) .

<input type="checkbox" name="my-checkbox" checked>
$("[name='my-checkbox']").bootstrapSwitch();

Utiliza tipos de radio o casillas de verificación como interruptores. Se typeha añadido un atributo desde V.1.8.

El código fuente está disponible en Github .

Nota de 2018

No recomendaría usar ese tipo de botones de Switch viejos ahora, ya que siempre parecían sufrir problemas de usabilidad como lo señalan muchas personas.

Considere echar un vistazo a los conmutadores modernos como este del marco de React Component (no relacionado con Bootstrap, pero se puede integrar en la cuadrícula y la interfaz de usuario de Bootstrap).

Existen otras implementaciones para Angular, View o jQuery.

import '../assets/index.less'
import React from 'react'
import ReactDOM from 'react-dom'
import Switch from 'rc-switch'

class Switcher extends React.Component {
  state = {
    disabled: false,
  }

  toggle = () => {
    this.setState({
      disabled: !this.state.disabled,
    })
  }

  render() {
    return (
      <div style={{ margin: 20 }}>
        <Switch
          disabled={this.state.disabled}
          checkedChildren={'开'}
          unCheckedChildren={'关'}
        />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Switcher />, document.getElementById('__react-content'))

Switches de Bootstrap nativos

Vea la respuesta de ohkts11 a continuación sobre los conmutadores Bootstrap nativos .

Si no le importa cambiar su HTML, puede usar el data-toggleatributo en <button>s. Consulte la sección de alternancia única de los ejemplos de botones :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>

Bootstrap 3 tiene opciones para crear botones de alternancia basados ​​en casillas de verificación o botones de radio: http://getbootstrap.com/javascript/#buttons

Casillas de verificación

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

Botones de radio

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

Para que estos funcionen, debe inicializar .btns con JavaScript de Bootstrap:

$('.btn').button();

He estado intentando activar la clase 'activa' manualmente con javascript. No es tan utilizable como una biblioteca completa, pero para casos sencillos parece ser suficiente:

var button = $('#myToggleButton');
button.on('click', function () {
  $(this).toggleClass('active');
});

Si lo piensa detenidamente, bootstrap usa la clase 'activa' cuando se presiona el botón, no antes o después de eso (nuestro caso), por lo que no hay conflicto en la reutilización de la misma clase.

Prueba este ejemplo y dime si falla: http://jsbin.com/oYoSALI/1/edit?html,js,output

Si desea mantener una base de código pequeña, y solo necesitará el botón de alternancia para una pequeña parte de la aplicación. Sugeriría, en cambio, mantener su código javascript usted mismo (angularjs, javascript, jquery) y simplemente usar CSS simple.

Buen generador de botones de alternancia: https://proto.io/freebies/onoff/

Aquí esta muy útil para Bootstrap Toggle Button . Ejemplo en fragmento de código !! y jsfiddle a continuación.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <input id="toggle-trigger" type="checkbox" checked data-toggle="toggle">
    <button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>
<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

Actualización 2020 para Bootstrap 4

Recomendé bootstrap4-toggle en 2020.

<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-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/js/bootstrap4-toggle.min.js"></script>

<input id="toggle-trigger" type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>

<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

Puede utilizar la biblioteca CSS Toggle Switch. Simplemente incluya el CSS y programe el JS usted mismo: http://ghinda.net/css-toggle-switch/bootstrap.html

Puede usar el interruptor de diseño de materiales para Bootstrap 3.3.0

http://bootsnipp.com/snippets/featured/material-design-switch

Solución Bootstrap 4

bootstrap 4 naves incorporado alternar. Aquí está la documentación. https://getbootstrap.com/docs/4.3/components/forms/#switches

En caso de que alguien todavía esté buscando un buen interruptor / botón de alternancia, seguí la sugerencia de Rick y creé una directiva angular simple a su alrededor, interruptor angular . Además de preferir un conmutador estilo Windows, la descarga total también es mucho más pequeña (2kb vs 23kb minified css + js) en comparación con el conmutador de arranque angular y el conmutador de arranque mencionado anteriormente juntos.

Lo usaría de la siguiente manera. Primero incluya el archivo js y css requerido:

<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>

Y habilítelo en su aplicación angular:

angular.module('yourModule', ['csComp'
    // other dependencies
]);

Ahora está listo para usarlo de la siguiente manera:

<switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}">
</switch>