Bootstrap中的switch开关组件

一、简介

Bootstrap Switch是一款通过复选框美化实现的一款开关控件，可以给选择框设置类似于开关的样式，它是依赖于Bootstrap的一款插件。

二、怎么下载

官网地址 :
GitHub下载地址 :

三、如何导入

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-switch.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>       
<script src="js/bootstrap-switch.min.js"></script>

四、如何使用

//定义一个选择框
<input type="checkbox" name="test">
//给选择框应用样式
<script type="text/javascript">
	$('[name="test"]').bootstrapSwitch({  
	    onText:"ON",  
	    offText:"OFF",  
	    onColor:"success",  
	    offColor:"danger",  
	    size:"small",  
        onSwitchChange:function(event,state){  
	        if(state==true){  
	           console.log('已打开');  
	        }else{  
	           console.log('已关闭');  
	        }  
	    }  
	});
</script>

五、常用属性

常用的属性：

1. size ：开关大小。可选值有 mini, small, normal, large
2. onColor：开关中开按钮的颜色。可选值有 primary, info, success, warning, danger, default
3. offColor：开关中关按钮的颜色。可选值 primary, info,success, warning, danger, default
4. onText：开关中开按钮的文本，默认是 ON
5. offText：开关中关按钮的文本，默认是 OFF
6. onInit：初始化组件的事件。
7. onSwitchChange：开关变化时的事件。
8. data-on-color/ data-off-color: primary 深蓝, info 浅蓝, success 绿色, warning 黄色, danger 红色

各属性详细介绍：

六、效果展示：

七、遇到的问题:

有时候样式可能会出现问题，如下图会多出来一点边搞得样式看起来极丑，只需添加如下css就可以了：

.bootstrap-switch-label {
    width: 42px !important;
}

参考连接：https://blog.csdn.net/qq_42552393/article/details/99213585