如何在 Bootstrap 中创建切换按钮

2013年的初步答案

出色的（非官方）Bootstrap Switch is available。

https://i.stack.imgur.com/9QTta.png

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

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

源代码是 available on Github。

2018 年的注意事项

我现在不建议使用那种旧的 Switch 按钮，因为它们似乎总是被许多人指出为 suffer of usability issues。

请考虑查看 React Component framework 中的 modern Switches like this one（与 Bootstrap 无关，但可以集成到 Bootstrap 网格和 UI 中）。

Angular、View 或 jQuery 还存在其他实现。

https://i.stack.imgur.com/4E0Uu.png

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

本机引导开关

有关 native Bootstrap switches，请参阅下面的 ohkts11's answer。

---

如果您不介意更改 HTML，可以使用 <button> 上的 data-toggle 属性。请参阅 the button examples 的 单次切换 部分：

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

要使它们正常工作，您必须使用 Bootstrap 的 Javascript 初始化 .btn：

$('.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/

---

这里这个非常有用 For Bootstrap Toggle Button 。代码片段中的示例！和下面的jsfiddle。

由 API 开启 通过 API 关闭 获取值 <脚本 src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 完整性="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">< /script> <链接 href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet"> API 开启 API 关闭 获取值