如何在Bootstrap中创build一个切换button
我最初创build了一个HTML，CSS和JavaScript的Web应用程序，然后被要求在Bootstrap中再次创build它。 我已经做得很好，但是我已经在网页应用程序中切换回到无线电（原来是checkbox）button而不是我最初的切换button。
这些button的代码是：
<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">
有没有办法改变代码，所以我可以得到切换button？
不知道是否有帮助，但是一个优秀的（非官方的） 自举开关可用 。 它使用无线电types。
更新：您现在也可以使用单选button或checkbox作为开关。 从V.1.8开始，添加了一个type属性。
源代码在Github上可用 。
如果您不介意更改HTML，则可以在<button>上使用data-toggle属性。 请参阅button示例的单一切换部分：
<button type="button" class="btn btn-primary" data-toggle="button"> Single toggle </button>
引导3有基于checkbox或单选button创build切换button的选项： http : //getbootstrap.com/javascript/#buttons
checkbox
<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>
单选button
<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 s：
$('.btn').button();
我一直在尝试用javascript手动激活“活动”类。 它不如一个完整的库可用，但对于简单的情况似乎已经足够了：
var button = $('#myToggleButton'); button.on('click', function () { $(this).toggleClass('active'); });
如果你仔细想想，按下button的时候，“主动”类被bootstrap使用，而不是之前或之后（我们的情况），所以在重用同一个类时没有冲突。
试试这个例子，告诉我它是否失败： http : //jsbin.com/oYoSALI/1/edit?html,js,output
如果你想保留一个小的代码库，你只需要在应用程序的一小部分需要切换button。 我会build议，而不是维护你的JavaScript代码你的自我（angularjs，JavaScript的，jQuery），只是使用普通的CSS。
好的切换button生成器： https ： //proto.io/freebies/onoff/
您可以使用CSS切换开关库。 只需包含CSS并自己编写 JS： http : //ghinda.net/css-toggle-switch/bootstrap.html
您可以使用Material Design Switch for Bootstrap 3.3.0
http://bootsnipp.com/snippets/featured/material-design-switch
这里这个非常有用的对于Bootstrap切换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>
如果有人仍然在寻找一个不错的开关/切换button，我遵循里克的build议，并围绕它创build一个简单的angular度指令， angular度切换 。 除了更喜欢Windows风格的开关，与上面提到的angular度自举开关和自举开关相比，总下载量也小得多（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>
