转：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>
相关推荐
switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关...
bootstrap-switch.min.js
bootstrap-switch.min.css
这是一个针对Bootstrap实现的开关(switch)控件。能够支持尺寸、颜色等属性的自定义。功能强大
bootstrap-switch bootstrap 开关
使用实例： https://blog.csdn.net/weixin_43929904/article/details/124149121?spm=1001.2014.3001.5502
bootstrap-switch-master的switcher开关。包括js和css
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
前端项目-angular-bootstrap-switch,引导开关jquery插件的angularjs指令。
bootstrap-switch开关控件,里面包含了bootstrap-switch的css和bootstrap-switch.js两个主要的文件,使用时只需要引入这两个文件,然后初始化$('[name="status"]').bootstrapSwitch({ size:"mini", onSwitchChange:...
本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考，具体如下： 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css <link rel="stylesheet" href="../plugins/...
最新版bootstrap-switch 3.3.4版 ，最近本人也在网上找来着，没想到这种插件的下载积分居然要好多呀，无语。 因此上传自己的供大家使用
网上的bootstrap-switch使用不便，因此整理了我在项目上所使用的开关控件，结合bootstrap框架使用
压缩包里面有： 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
bootstrap-table插件：bootstrap-editable,可编辑下拉框，以及代码实例,