如何在Bootstrap中创建切换按钮 [英] How to create a toggle button in Bootstrap

问题描述

我最初在HTML，CSS和JavaScript中创建了一个Web应用程序，然后被要求在Bootstrap中再次创建它。我做的一切都很好，但我有在网络应用程序切换按钮，改变回收音机（原来复选框）按钮，而不是我原来的切换按钮。

I originally created a web app in HTML, CSS and JavaScript, then was asked to create it again in Bootstrap too. I've done it all fine, but I had toggle buttons in the web app that have changed back to radio (originally checkbox) buttons instead of the toggle buttons I had originally.

这些按钮的代码是：

<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文件是：

and the JavaScript and CSS files that the HTML page is linked to are;

<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">

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

Is there a way to change the code so I can get the toggle button back?

推荐答案

不确定是否有帮助，但是一个优秀的（非官方的）引导开关可用。

Not sure if it helps, but an excellent (unofficial) Bootstrap Switch is available. It uses radio types though.

更新：您现在还可以使用单选按钮或复选框作为开关。

Update: You can now also use radio buttons or checkboxes as switches. A type attribute has been added since V.1.8.

源代码在Github上可用。

这篇关于如何在Bootstrap中创建切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！