有时候,为了美化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>

效果:

bootstrap 多选款样式:bootstrap-switch

 

相关文章:

  • 2021-09-16
  • 2021-08-01
  • 2022-12-23
  • 2022-12-23
  • 2021-08-17
  • 2022-12-23
  • 2022-12-23
  • 2021-12-08
猜你喜欢
  • 2022-01-26
  • 2021-11-26
  • 2022-12-23
  • 2022-12-23
  • 2022-01-06
  • 2021-10-03
  • 2021-12-16
相关资源
相似解决方案