bootstrap 多选款样式：bootstrap-switch

有时候，为了美化checkbox后者radio的时候，让用户体验起来更好，jquery里有icheck。

bootstrap里有bootstrap-switch，就简单介绍下bootstrap-switch。

官网地址：http://www.bootcss.com/p/bootstrap-switch/

GitHub：https://github.com/Bttstrp/bootstrap-switch

js引入：

1 <script src="/static/js/jquery-2.1.1.min.js"></script>
2 <script src="/static/js/bootstrap-switch.min.js"></script>
3 <script src="/static/js/bootstrap.min.js"></script>

css引入：

1 <link href="/static/css/bootstrap-switch.css" rel="stylesheet">
2 <link href="/static/css/bootstrap.min.css" rel="stylesheet">

js：可以自定义button大小和颜色！

1         $("[name='sw_checkbox']").bootstrapSwitch(
2                 {
3                     size:"small"
4                 }
5         );

html:

1 <label ><input type="checkbox" name="sw_checkbox"> &nbsp&nbsp <i class="fa fa-search" aria-hidden="true"></i> xxxx：</label>

效果：

 

转载于:https://www.cnblogs.com/evilliu/p/7263856.html