转：http://www.jsctrlc.com/texiao/36.html
bootstrap-switch开关按钮表单插件
bootstrap-switch插件这是一个针对Bootstrap实现的开关（switch）按钮控件，可以支持尺寸、颜色等属性的自定义。开关式按钮在国内网站上使用的并不是很多，Bootstrap 的应用在国外非常流行，不知道是我们不喜欢还是使用它很麻烦很难适合网站来使用。但这种开头式按钮在手机等移动设备上的应用是最广泛的，屏幕的特性促使它更好的发展。
功能说明：
我这就介绍chekbox与radio的两个表单的简单使用，其他更多的效果与功能可以浏览demo，点击按钮以滑动的方式进行on/off切换。
使用说明：
1.引入CSS与JS文件
<link rel="stylesheet" href="static/stylesheets/bootstrap-switch.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="static/js/bootstrap-switch.js"></script>2.html内容添加
<div class="make-switch" data-on="info" data-off="success">
<input type="checkbox" checked>
</div>
<div class="make-switch" data-on="success" data-off="warning">
<input type="checkbox" checked>
</div>
<div class="make-switch" data-on="warning" data-off="danger">
<input type="checkbox" checked>
</div>
<div class="make-switch" data-on="danger" data-off="default">
<input type="checkbox" checked>
</div>
<div class="make-switch" data-on="default" data-off="primary">
<input type="checkbox" checked>
</div> make-switch:对使用插件的checkbox添加CSS样式。
data-on：为on状态时的CSS样式。
data-off:为off状态时的CSS样式。
radio单选框的使用：
<label for="option11">Option 1</label>
<div class="make-switch radio2">
<input id="option11" type="radio" name="radio2" value="option11">
</div>
<label for="option12">Option 2</label>
<div class="make-switch radio2">
<input id="option12" type="radio" name="radio2" value="option12" checked="checked">
</div>
<label for="option13">Option 3</label>
<div class="make-switch radio2">
<input id="option13" type="radio" name="radio2" value="option13">
</div> radio单选框的使用方法是相同的，因为单选框先中其中一个是其他状态都要改变，所以要添加相应的JS代码；
<script>
$('.radio2').on('switch-change', function () {
$('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
});
</script>
以下为设置参数：
尺寸（Size）
ON
OFF
ON
OFF
ON
OFF
ON
OFF
<div class="switch switch-large">
<input type="checkbox" checked />
</div>
<div class="switch">
<input type="checkbox" checked />
</div>
<div class="switch switch-small">
<input type="checkbox" checked />
</div>
<div class="switch switch-mini">
<input type="checkbox" checked />
</div>
颜色（Colors）
ON
OFF
ON
OFF
ON
OFF
ON
OFF
ON
OFF
<div class="switch" data-on="primary" data-off="info">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="info" data-off="success">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="success" data-off="warning">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="warning" data-off="danger">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="danger" data-off="primary">
<input type="checkbox" checked />
</div>
动画（Animation）
ON
OFF
<div class="switch" data-animated="false">
<input type="checkbox" checked />
</div>
禁用（Disabled）
ON
OFF
<div class="switch"> <input type="checkbox" checked disabled /> </div>
文本（Text）
SI
NO
<div class="switch" data-on-label="SI" data-off-label="NO">
<input type="checkbox" checked />
</div>
HTML文本（HTML text）
<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" checked />
</div>
事件处理（Event handler） javascript
ON
OFF
$('#mySwitch').on('switch-change', function (e, data) {
var $el = $(data.el)
, value = data.value;
console.log(e, $el, value);
});
Toggle State javascript
ON
OFF
ON!
Toggle me!
OFF!
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
销毁（Destroy） javascript
ON
OFF
Destroy me!
$('#destroy-switch').bootstrapSwitch('destroy');
创建（Create） javascript
Create
$('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch();
禁用（Disabled） javascript
ON
OFF
Is active? Toggle activation! Disable! Activate!
$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false); // true || false
表单（Form） - try to use tab and space
Email
Notification 1
ON
OFF
Notification 2
ON
OFF
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="notification1">Notification 1</label>
<div class="controls">
<div class="switch" tabindex="0">
<input id="notification1" type="checkbox" />
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="notification2">Notification 2</label>
<div class="controls">
<div class="switch" tabindex="0">
<input id="notification2" type="checkbox" />
</div>
</div>
</div>
</form>
模态对话（Modal）
<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
-----
<div class="modal-body">
<div class="switch">
<input type="checkbox" checked />
</div>
</div>