96

我最初用 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">

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

4

10 回答 10

82

2013年的初步答案

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

经典 2013 开关

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

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

源代码在 Github 上可用。

2018 年的注意事项

我现在不建议使用那种旧的 Switch 按钮，因为它们似乎总是受到许多人指出的可用性问题的困扰。

请考虑从React 组件框架（与 Bootstrap 无关，但可以集成到 Bootstrap 网格和 UI 中）中查看像这样的现代开关。

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

现代 2018 开关

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 的回答。

于 2013-03-01T15:16:59.007 回答
59

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

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>
于 2014-01-21T05:02:25.860 回答
32

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();
于 2014-09-18T18:37:14.977 回答
8

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

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

如果您仔细考虑，当按钮被按下时，引导程序会使用“活动”类，而不是在此之前或之后（我们的例子），因此重用同一个类没有冲突。

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

于 2013-11-27T12:54:39.100 回答
6

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

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

于 2015-03-30T16:41:35.783 回答
3

这对于 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>
我向您展示了上面的几个示例。我希望它有所帮助。Js Fiddle 在这里 源代码在 GitHub 上可用。

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>

于 2017-05-05T07:08:12.417 回答
2

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

于 2014-04-04T18:30:17.013 回答
2

您可以使用 Bootstrap 3.3.0 的 Material Design Switch

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

于 2016-01-07T10:21:55.177 回答
1

Bootstrap 4 解决方案

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

在此处输入图像描述

于 2019-11-23T04:39:35.037 回答
-1

如果有人仍在寻找一个不错的开关/切换按钮，我遵循 Rick 的建议并围绕它创建了一个简单的角度指令angular-switch。除了更喜欢 Windows 风格的开关外，与上面提到的 angular-bootstrap-switch 和 bootstrap-switch 相比，总下载量也小得多（2kb 与 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 应用程序中启用它：

angular.module('yourModule', ['csComp'
    // other dependencies
]);

现在您可以按如下方式使用它：

<switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}">
</switch>

在此处输入图像描述

于 2015-08-06T23:38:08.537 回答