Eu originalmente criei um aplicativo da web em HTML, CSS e JavaScript, então fui solicitado a criá-lo novamente no Bootstrap. Fiz tudo bem, mas tinha botões de alternância no aplicativo da web que mudaram de volta para botões de rádio (originalmente caixa de seleção) em vez dos botões de alternância que tinha originalmente.

O código dos botõ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>

e os arquivos JavaScript e CSS aos quais a página HTML está vinculada são:

<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">

Existe uma maneira de alterar o código para que eu possa obter o botão de alternância de volta?

Resposta inicial de 2013

Um excelente (não oficial) Bootstrap Switch está disponível .

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

Ele usa tipos de rádio ou caixas de seleção como interruptores. Um typeatributo foi adicionado desde V.1.8.

O código-fonte está disponível no Github .

Nota de 2018

Eu não recomendaria usar esse tipo de botão Switch antigo agora, pois eles sempre pareceram sofrer de problemas de usabilidade, conforme apontado por muitas pessoas.

Considere dar uma olhada em Switches modernos como este da estrutura do Componente React (não relacionado ao Bootstrap, mas pode ser integrado na grade do Bootstrap e na IU).

Existem outras implementações para Angular, View ou 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

Veja a resposta do ohkts11 abaixo sobre as opções nativas do Bootstrap .

Se você não se importa em mudar seu HTML, pode usar o data-toggleatributo em <button>s. Consulte a seção de alternância única dos exemplos de botão :

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

O Bootstrap 3 tem opções para criar botões de alternância com base em caixas de seleção ou botões de rádio: http://getbootstrap.com/javascript/#buttons

Caixas de seleção

<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>

Botões do rádio

<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 funcionem, você deve inicializar os .btns com Javascript do Bootstrap:

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

Tenho tentado ativar a classe 'ativa' manualmente com javascript. Não é tão utilizável quanto uma biblioteca completa, mas para casos fáceis parece ser suficiente:

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

Se você pensar com cuidado, a classe 'ativa' é usada pelo bootstrap quando o botão está sendo pressionado, não antes ou depois disso (nosso caso), portanto, não há conflito em reutilizar a mesma classe.

Tente este exemplo e diga-me se ele falhar: http://jsbin.com/oYoSALI/1/edit?html,js,output

Se você deseja manter uma pequena base de código, só precisará do botão de alternância para uma pequena parte do aplicativo. Em vez disso, sugiro que você mantenha seu código javascript (angularjs, javascript, jquery) e use CSS simples.

Bom gerador de botão de alternância: https://proto.io/freebies/onoff/

Aqui é muito útil para botão de alternância de bootstrap . Exemplo no trecho de código !! e jsfiddle abaixo.

  <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>

Atualização 2020 para Bootstrap 4

Recomendei bootstrap4-toggle em 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>

Você pode usar a biblioteca CSS Toggle Switch. Basta incluir o CSS e programar o JS você mesmo: http://ghinda.net/css-toggle-switch/bootstrap.html

Você pode usar o Material Design Switch para Bootstrap 3.3.0

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

Solução Bootstrap 4

bootstrap 4 naves comutador integrado. Aqui está a documentação. https://getbootstrap.com/docs/4.3/components/forms/#switches

No caso de alguém ainda estar procurando por um botão de alternar / alternar legal, eu segui a sugestão de Rick e criei uma diretiva angular simples em torno dele, interruptor angular . Além de preferir um switch no estilo do Windows, o download total também é muito menor (2kb vs 23kb css + js minificado) em comparação com o switch de bootstrap angular e o switch de bootstrap mencionados acima.

Você o usaria da seguinte maneira. Primeiro inclua o arquivo js e css necessário:

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

E habilite-o em seu aplicativo angular:

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

Agora você está pronto para usá-lo da seguinte maneira:

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