如何在Bootstrap中创建切换按钮

Question

我最初用HTML，CSS和JavaScript创建了一个Web应用程序，然后被要求在Bootstrap中再次创建它。我做得很好，但是我已经在网络应用中切换了回到无线电（原始复选框）按钮的按钮，而不是我原来的切换按钮。

按钮的代码是：

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

有没有办法更改代码，以便我可以返回切换按钮？

Answer 1

2013年的初步答案

优秀（非官方）Bootstrap Switch is available。

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

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

源代码为available on Github。

2018年的注释

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

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

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

Answer 2

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

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

Answer 3

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();

Answer 4

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

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

如果仔细考虑，按下按钮时，引导程序会使用'active'类，而不是之前或之后（我们的情况），因此重用同一个类没有冲突。

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

Answer 5

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

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

Answer 6

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

Answer 7

您可以使用Material Design Switch for Bootstrap 3.3.0

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

Answer 8

Bootstrap 4解决方案

bootstrap 4附带了内置切换。这是文档。 https://getbootstrap.com/docs/4.3/components/forms/#switches

Answer 9

如果有人还在寻找一个不错的开关/切换按钮，我会按照Rick的建议并在其周围创建一个简单的角度指令angular-switch。除了更喜欢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>