如何在Bootstrap中创建切换按钮
我最初用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>页面所链接的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">有没有办法更改代码，这样我就可以拿回切换按钮了？
回答 6
Stack Overflow用户
发布于 2014-09-19 02:37:15
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();Stack Overflow用户
发布于 2013-11-27 20:54:39
我一直在尝试用javascript手动激活'active‘类。它不像一个完整的库那样可用，但对于简单的情况来说似乎足够了：
var button = $('#myToggleButton');
button.on('click', function () {
$(this).toggleClass('active');
});如果你仔细想想，“active”类是在按钮被按下时由bootstrap使用的，而不是在按钮被按下之前或之后(我们的例子)，所以重用相同的类不会有冲突。
试试这个例子，如果失败了就告诉我：http://jsbin.com/oYoSALI/1/edit?html,js,output
Stack Overflow用户
发布于 2015-03-31 00:41:36
如果你想保持一个很小的代码库，并且你只需要在应用程序的一小部分中使用切换按钮。我建议你自己编写javascript代码(angularjs，javascript，jquery)，只使用简单的CSS。
良好的切换按钮生成器：https://proto.io/freebies/onoff/
https://stackoverflow.com/questions/13511368
复制相似问题