如何创建引导切换按钮(How to create a toggle button in Bootst

我最初创建一个web应用程序的HTML，CSS和JavaScript，然后被要求在引导再次创建它。 我所做的这一切很好，但我曾在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">

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

Answer 1:

从2013年最初的回答

一个优秀的（非官方） 引导开关可用 。

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

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

源代码可在Github上 。

从2018注

我并不建议现在就使用这些慈祥的老人开关按钮，因为他们似乎总是遭受可用性问题在很多人指出。

请考虑在看看现代交换机这样一个从阵营组件框架 （不bootstrap需要，但可以集成在引导网格和UI虽然）。

其他实现的角度，查看或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>秒。 见的单套环区段的按钮的例子 ：

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

Answer 3:

引导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 s的引导的JavaScript：

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

Answer 4:

我一直在试图手动激活“活动”类的JavaScript。 它并不像使用一个完整的库，但方便的情况下似乎是不够的：

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

如果你仔细想想，“积极”类由引导时被按下的按钮，而不是（我们的情况下）之前或之后，所以有重用没有冲突的同一类。

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

Answer 5:

如果你想保持小的代码库，而你只打算将需要切换按钮的应用程序的一小部分。 我建议，而不是保持你的JavaScript代码你的自我（angularjs，JavaScript的，jQuery的），只是使用普通的CSS。

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

Answer 6:

这里这个非常有用的自举切换按钮 。 实施例中的代码段！ 和下面的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> 

我给你举几个例子以上。 我希望它能帮助。 爵士小提琴是这里的源代码是在GitHub avaible。

Answer 7:

您可以使用CSS拨动开关库。 只是包括了CSS和程序的JS自己： http://ghinda.net/css-toggle-switch/bootstrap.html

Answer 8:

您可以使用引导3.3.0材质设计开关

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

Answer 9:

如果有人还在寻找一个很好的开关/切换按钮，我跟着Rick的建议，并创造了它周围的一个简单的角度指令， 角开关 。 此外宁愿一个Windows风格开关，总下载也小得多（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>

文章来源: How to create a toggle button in Bootstrap