bootstrap-switch插件这是一个针对Bootstrap实现的开关(switch)按钮控件,能够支持尺寸、颜色等属性的自定义。开关式按钮在国内网站上使用的并非不少,Bootstrap 的应用在国外很是流行,不知道是咱们不喜欢仍是使用它很麻烦很难适合网站来使用。但这种开头式按钮在手机等移动设备上的应用是最普遍的,屏幕的特性促使它更好的发展。css
功能说明:html
我这就介绍chekbox与radio的两个表单的简单使用,其余更多的效果与功能能够浏览demo,点击按钮以滑动的方式进行on/off切换。jquery
使用说明:web
1.引入CSS与JS文件ajax
<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内容添加 bootstrap
<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样式。 api
data-on:为on状态时的CSS样式。网站
data-off:为off状态时的CSS样式。google
radio单选框的使用:spa
<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>
这样咱们就以简单的实现咱们想要的开关按钮效果了。