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