如何在Bootstrap中创建一个切换按钮

Question

如何在Bootstrap中创建一个切换按钮

javascriptjquerycsstwitter-bootstrapjqtouch

98

我最初使用HTML、CSS和JavaScript创建了一个Web应用程序，后来被要求再次使用Bootstrap创建。我已经完成了所有的工作，但是在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">

有没有一种方法可以更改代码，以便我可以重新获得切换按钮？

- Megan Sime

1

这里有许多例子 http://twitter.github.com/bootstrap/javascript.html#buttons - itsme

好的，所以这与bootstrap本身无关，我认为它与jqtouch.js有关。 - itsme

1

好的，如果这样更容易的话，它已经在Github上了。 - Megan Sime

1

哈哈，我看到了一个无限的文件列表 :) 你能不能更具体一些呢？ :D - itsme

抱歉，主页面是index2.html，但带有切换按钮的页面是settings.html。 - Megan Sime

显示剩余5条评论

10个回答

59

如果您不介意更改HTML，您可以在上使用data-toggle属性。请参见按钮示例中的单个切换部分：

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

- Sam

1

有没有办法在单选开关中像复选框/单选按钮选项一样拥有内部复选框？ - Shimmy Weitzhandler

3

"aria-pressed =“true”"可用于检查状态。 - brauliobo

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>

为了让这些正常工作，您必须使用Bootstrap的Javascript初始化.btn：

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

- StriplingWarrior

有没有办法在单选开关中像复选框/单选按钮选项一样拥有内部复选框？ - Shimmy Weitzhandler

@Shimmy：如果您只是将一个复选框放入按钮组中，您会得到相同的行为。我不知道有什么更简洁的方法来获得支持单个切换的复选框。 - StriplingWarrior

8

我一直在尝试使用JavaScript手动激活“active”类。虽然它不像一个完整的库那样实用，但对于简单的情况似乎已经足够了:

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

如果你仔细思考，'active' class是在Bootstrap按钮被按下时使用的，而不是在之前或之后（我们的情况），因此重用同一类不会产生冲突。

尝试这个示例，告诉我是否失败: http://jsbin.com/oYoSALI/1/edit?html,js,output

- user2547435

1

我认为用户没有问到这个问题，但是你的回答正好解决了我的疑问！ - tetri

我认为这本来就是用户接下来要问的问题。 - eaglei22

7

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

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

- Rick

3

~~这是一个非常有用的Bootstrap切换按钮。以下是代码段示例和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>

~~I showed you a few examples above. I hope it helps. Js Fiddle is here Source code is avaible on GitHub.~~

2020年Bootstrap 4更新

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

- Muhammet Can TONBUL

简短、简洁明了，快速易懂的解决方案，你让我的一天都变得美好了！ - Mayer Spitz

2

Bootstrap 4解决方案

Bootstrap 4自带切换功能。以下是相关文档。 https://getbootstrap.com/docs/4.3/components/forms/#switches

- ohkts11

似乎只支持Bootstrap 4.3及以上版本。 - GeorgeCostanza

2

你可以使用CSS Toggle Switch库。只需包含CSS并自己编写JS程序： http://ghinda.net/css-toggle-switch/bootstrap.html

- OMA

1

虽然这可能回答了问题，但最好在此提供实际信息，而不仅仅是一个链接。仅链接的答案不被认为是好的答案，很可能会被删除。 - elixenide

但这不是一个解释的链接。这是一个实际库的链接，我在我的答案中提到了它的名称。你真的想让我在这里发布整个库源代码吗？如果我只是说“使用这个库：[链接]”而没有提到库的名称，那么我的答案就是错误的，但由于我提到了名称，我认为答案是适当的，因为如果链接失效，他/她可以尝试从其他地方下载该库，因为名称已知。 - OMA

你不必发布整个库的源代码，但至少需要提供一些关于如何使用它的见解。仅仅包含CSS并自己编写JS程序是不够的，这也不太可能帮助到OP或其他用户。 - elixenide

2

使用起来真的很简单！只需包含其中一个CSS代码示例，然后使用JS编写您想要执行的任何操作。我无法评论实际的JS编程，因为原帖作者没有要求在使用切换按钮时执行特定的操作，那么我还能说什么呢？此外，为什么被接受的答案被认为是可以的？它也是一个“仅链接”答案！（它只是说“不确定是否有帮助，但是有一个出色的（非官方）Bootstrap Switch可用。它使用收音机类型。”）。为什么那个答案可以呢？您在那里没有评论它的仅链接性质。 - OMA

2

您可以使用Bootstrap 3.3.0的Material Design Switch。 http://bootsnipp.com/snippets/featured/material-design-switch

- Ivan Rodriguez

-1

如果有人仍在寻找一个漂亮的开关/切换按钮，我遵循Rick的建议并创建了一个简单的angular指令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应用程序中启用它：

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

现在你可以按照以下方式使用它：

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

- Erik Vullings

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- smonff · Accepted Answer

2013年的初步回答

有一个优秀的（非官方）Bootstrap Switch可用。

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

它使用单选按钮或复选框作为开关。自版本1.8以来，已添加了"type"属性。

源代码在Github上可用。

2018年的说明

我不建议现在使用这种旧式的开关按钮，因为它们似乎总是存在可用性问题，正如许多人所指出的那样。

请考虑查看像这个一样的现代开关按钮，来自React组件框架（与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'))

本地化的 Bootstrap 开关

请查看下面ohkts11的回答，了解本地化的 Bootstrap 开关。