如何在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.

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

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

源代码可在Github上找到.

2018年的注释

我不建议现在使用那种旧的Switch按钮,因为他们总是看起来像许多人所指出的可用性问题.

请考虑从React Component框架看一下像这样的现代开关(不是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,可以使用s data-toggle上<button>的属性.请参阅按钮示例的单个切换部分:

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

要使这些工作,您必须.btn使用Bootstrap的Javascript 初始化s:

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