版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xuxin132133/article/details/83107060
重点是找到这两个文件bootstrap-switch.min.js和css/bootstrap-switch.min.css，这里我提供连接，只要有网就能使用！
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.js
以上是js和css文件，粘贴到style和link标签里面就可以了。还可以下载我上传整理好的两个文件！
<script src="bootstrap/js/bootstrap-switch.min.js"></script> <link href="bootstrap/css/bootstrap-switch.min.css" rel="stylesheet">
<!DOCTYPE html>
<html xmlns:https="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>用户设置</title>
<!--bootstrap框架引入内容-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link href="bootstrap/css/bootstrap-switch.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.js"></script>
<script src="js/jquery.min.3.1.0.js"></script>
<script src="bootstrap/js/bootstrap-switch.min.js"></script>
<link href="bootstrap/css/bootstrap-switch.min.css" rel="stylesheet">
</head>
<body>
<input name="status" type="checkbox" data-size="small">
<script type="text/javascript">
$('[name="status"]').bootstrapSwitch({
onText:"启动",
offText:"停止",
onColor:"success",
offColor:"info",
size:"small",
onSwitchChange:function(event,state){
if(state==true){
alert('已打开');
}else{
alert('已关闭');
}
}
})
</script>
</body>
</html>