Если вы не против изменить свой HTML, вы можете использовать data-toggle атрибут on <button>s. Смотрите односкоростная на кнопка примеры:

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

Bootstrap 3 имеет опции для создания переключателей на основе флажков или переключателей:http://getbootstrap.com/javascript/#buttons

чекбоксы

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

переключатель

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

для их работы вы должны инициализировать .btns с Javascript Bootstrap:

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

Я пытался активировать "активный" класс вручную с помощью javascript. Это не так удобно, как полная библиотека, но для простых случаев, кажется, достаточно:

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

Если вы тщательно подумаете, "активный" класс используется bootstrap при нажатии кнопки, а не до или после этого (наш случай), поэтому нет конфликта в повторном использовании того же класса.

попробуйте этот пример и скажите мне, если это не удастся:http://jsbin.com/oYoSALI/1/edit?html,js, выход

Если вы хотите сохранить небольшую базу кода, и вам понадобится только кнопка переключения для небольшой части приложения. Я бы предложил вместо этого поддерживать код javascript самостоятельно (angularjs, javascript, jquery) и просто использовать простой CSS.

хороший генератор тумблера: https://proto.io/freebies/onoff/

вы можете использовать библиотеку переключателей CSS. Просто включите CSS и запрограммируйте JS самостоятельно: http://ghinda.net/css-toggle-switch/bootstrap.html

вы можете использовать переключатель Material Design для Bootstrap 3.3.0

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

вот это очень полезно Для Кнопки Переключения Bootstrap . Пример в фрагменте кода!! и jsfiddle ниже.

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

в случае, если кто-то все еще ищет хороший переключатель/тумблер, я последовал предложению Рика и создал простую угловую директиву вокруг него, угловое-переключатель. Помимо предпочтения коммутатора в стиле Windows, общая загрузка также намного меньше (2kb vs 23kb minified css+js) по сравнению с angular-bootstrap-switch и bootstrap-switch, упомянутыми выше вместе.

вы бы использовали его следующим образом. Сначала включите необходимый файл js и css:

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

и включите его в своем угловом приложении:

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

Теперь вы готовы использовать его следующим образом:

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