我最初使用HTML，CSS和JavaScript创建了一个Web应用程序，然后又被要求在Bootstrap中再次创建它。我做得很好，但是我在Web应用程序中将切换按钮改回了单选按钮（最初是复选框），而不是原来的切换按钮。

按钮的代码为：

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

HTML页面链接到的JavaScript和CSS文件是：

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

有没有办法更改代码，以便可以将切换按钮找回来？

2013年的初步答案

一个出色的（非官方）Bootstrap Switch是可用的。

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

它使用单选类型或复选框作为开关。type从V.1.8开始添加了一个属性。

源代码可在Github上获得。

2018年的注意事项

我不建议现在使用那些老式的“切换”按钮，因为它们似乎总是遭受许多人指出的可用性问题。

请考虑从React Component框架（不与Bootstrap相关，但可以集成到Bootstrap网格和UI中）中浏览一下这样的现代Switch。

存在其他用于Angular，View或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'))

本机自举开关

请参阅ohkts11关于本地Bootstrap交换机的答案。

如果您不介意更改HTML，则可以在data-toggle上使用属性<button>。请参阅按钮示例的“ 单次切换”部分：

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

为了使它们起作用，您必须.btn使用Bootstrap的Javascript 初始化：

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

我一直在尝试使用javascript手动激活“活动”类。它不像完整的库那样有用，但是对于简单的情况似乎就足够了：

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

如果您仔细考虑一下，则在按下按钮时引导程序将使用“活动”类，而不是在此之前或之后（本例），因此在重用同一类时不会发生冲突。

试试这个例子，告诉我它是否失败：http : //jsbin.com/oYoSALI/1/edit?html,js,output

如果您想保留一个小的代码库，并且只需要为应用程序的一小部分使用切换按钮。我建议改为保持您自己的JavaScript代码（angularjs，javascript，jquery），并仅使用纯CSS。

好的切换按钮生成器：https：//proto.io/freebies/onoff/

在这里，这对于Bootstrap Toggle Button非常有用。代码片段中的示例！和下面的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>

Bootstrap 4的2020更新

我建议在2020年启动bootstrap4-toggle。

<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/popper.js@1.16.0/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/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/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>

您可以使用CSS切换开关库。只需包含CSS并自己编写 JS即可：http : //ghinda.net/css-toggle-switch/bootstrap.html

您可以将材料设计开关用于Bootstrap 3.3.0

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

Bootstrap 4解决方案

bootstrap 4内置了触发器。这是文档。 https://getbootstrap.com/docs/4.3/components/forms/#switches

万一有人还在寻找一个不错的切换/切换按钮，我按照里克的建议，围绕它创建了一个简单的角度指令，即角度切换。除了更喜欢Windows风格的开关外，与上面一起提到的angular-bootstrap-switch和bootstrap-switch相比，总下载量也要小得多（2kb vs 23kb最小化的CSS + js）。

您将按以下方式使用它。首先包括所需的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>