bootstrap-switch开关组件使用

看下效果

bootstrap-switch.gif

首先在bootCDN https://www.bootcdn.cn/ 上下载好需要用到文件并引入jquery.js，bootstrap.min.css，bootstrap-switch.min.css，bootstrap-switch.min.js，bootstrap.min.css请到官网下载http://www.bootcss.com/

<link rel="stylesheet" href="css/bootstrap.min.css" />

<link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script>

文件都引入之后就开始制作开关了

<input style="margin-right: 5px;" name="status" type="checkbox"  checked>

            // 开关
 $('[name="status"]').bootstrapSwitch({    //初始化按钮
       onText:"Yes",
       offText:"No",
       onColor:"success",
       offColor:"info",
       size:"small",
       onSwitchChange:function(event,state){
          if(state==true){
               console.log("开启");
             }else{
              console.log("关闭");
             }
         }
    });

bootstrap-switch属性.png

遇到的问题：设置按钮大小的时候mini和small是一样的大小，noraml，large有效