问题
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.
The code for the buttons is:
<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>
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?
回答1:
Initial answer from 2013
An excellent (unofficial) Bootstrap Switch is available.
<input type="checkbox" name="my-checkbox" checked>
$("[name='my-checkbox']").bootstrapSwitch();
It uses radio types or checkboxes as switches. A type attribute has been added since V.1.8.
Source code is available on Github.
Note from 2018
I would not recommend to use those kind of old Switch buttons now, as they always seemed to suffer of usability issues as pointed by many people.
Please consider having a look at modern Switches like this one from the React Component framework (not Bootstrap related, but can be integrated in Bootstrap grid and UI though).
Other implementations exist for Angular, View or 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'))
回答2:
If you don't mind changing your HTML, you can use the data-toggle attribute on <button>s. See the Single toggle section of the button examples:
<button type="button" class="btn btn-primary" data-toggle="button">
Single toggle
</button>
回答3:
Bootstrap 3 has options to create toggle buttons based on checkboxes or radio buttons: http://getbootstrap.com/javascript/#buttons
Checkboxes
<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>
Radio buttons
<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>
For these to work you must initialize .btns with Bootstrap's Javascript:
$('.btn').button();
回答4:
I've been trying to activate 'active' class manually with javascript. It's not as usable as a complete library, but for easy cases seems to be enough:
var button = $('#myToggleButton');
button.on('click', function () {
$(this).toggleClass('active');
});
If you think carefully, 'active' class is used by bootstrap when the button is being pressed, not before or after that (our case), so there's no conflict in reuse the same class.
Try this example and tell me if it fails: http://jsbin.com/oYoSALI/1/edit?html,js,output
回答5:
If you want to keep a small code base, and you are only going to be needing the toggle button for a small part of the application. I would suggest instead maintain you're javascript code your self (angularjs, javascript, jquery) and just use plain CSS.
Good toggle button generator: https://proto.io/freebies/onoff/
回答6:
Here this very usefull For Bootstrap Toggle Button . Example in code snippet!! and jsfiddle below.
<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>回答7:
You can use the CSS Toggle Switch library. Just include the CSS and program the JS yourself: http://ghinda.net/css-toggle-switch/bootstrap.html
回答8:
You can use the Material Design Switch for Bootstrap 3.3.0
http://bootsnipp.com/snippets/featured/material-design-switch
回答9:
Bootstrap 4 solution
bootstrap 4 ships built-in toggle. Here is the documentation. https://getbootstrap.com/docs/4.3/components/forms/#switches
回答10:
In case someone is still looking for a nice switch/toggle button, I followed Rick's suggestion and created a simple angular directive around it, angular-switch. Besides preferring a Windows styled switch, the total download is also much smaller (2kb vs 23kb minified css+js) compared to angular-bootstrap-switch and bootstrap-switch mentioned above together.
You would use it as follows. First include the required js and css file:
<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>
And enable it in your angular app:
angular.module('yourModule', ['csComp'
// other dependencies
]);
Now you are ready to use it as follows:
<switch state="vm.isSelected"
textlabel="Switch"
changed="vm.changed()"
isdisabled="{{isDisabled}}">
</switch>
来源：https://stackoverflow.com/questions/13511368/how-to-create-a-toggle-button-in-bootstrap