twitter-bootstrap Bootstrap 开关的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32680559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problems with Bootstrap switch
提问by Paulo Frutuoso
I'm trying to use bootstrap switch and I'm facing some problems. I'm using this examples here http://www.jque.re/plugins/version3/bootstrap.switch/and whatever classes i'm using, the buttons stays with the same style and with very small size that I can't even see the ON and OFF text. I really don't know what I'm doing wrong. Any help? thanks
我正在尝试使用引导程序开关，但遇到了一些问题。我在这里使用这个例子http://www.jque.re/plugins/version3/bootstrap.switch/和我使用的任何类，按钮保持相同的样式和非常小的尺寸，我不能甚至可以看到 ON 和 OFF 文本。我真的不知道我做错了什么。有什么帮助吗？谢谢
here's my html:
这是我的 html：
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/jquery-ui-1.10.1.custom.css" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-switch.css" rel="stylesheet">
<link href="css/_custom.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/bootstrap-switch.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="make-switch switch-large">
<input type="checkbox" name="my-checkbox" checked>
<div class="make-switch" data-on="primary" data-off="info">
<input type="checkbox" checked name="my-checkbox">
<div id="label-switch" class="make-switch" data-on-label="SIM" data-off-label="N?O">
<input type="checkbox" checked name="my-checkbox">
</div>
</div>
</div>
</div></div>
</form>
</div>
<script type="text/javascript">
$("[name='my-checkbox']").bootstrapSwitch();
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
回答by vanburen
You dependencies are out of order; they should be like this.
您的依赖项出现故障；他们应该是这样的。
Header
标题
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet" />
<link href="path/custom.css" rel="stylesheet" type="text/css"/>
End of body
正文结束
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<script>$("[name='my-checkbox']").bootstrapSwitch();</script>
CSS Order
CSS 顺序
- Bootstrap CSS
- Boostrap Switch CSS
- Custom CSS
- 引导 CSS
- Boostrap 开关 CSS
- 自定义 CSS
JS Order
JS命令
- jQuery
- Bootstrap JS
- Bootstrap Switch JS
- jQuery
- 引导程序
- 引导开关 JS
You are also loading jQuery twice on the page, (once in your head and once in the end of the body) use it once before all JS dependencies.
您还在页面上两次加载 jQuery，（一次在您的头脑中，一次在正文的末尾）在所有 JS 依赖项之前使用它一次。
The $("[name='my-checkbox']").bootstrapSwitch();also needs to be placed after all the other JS dependencies in order for it to load.
该$("[name='my-checkbox']").bootstrapSwitch();还需要放置后，所有其它JS的依赖关系，以便为它的负载。
**Sidenote: You are missing an opening formtag as well.
**旁注：您也缺少开始form标签。
$("[name='my-checkbox']").bootstrapSwitch();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="make-switch switch-large">
<input type="checkbox" name="my-checkbox" checked>
<div class="make-switch" data-on="primary" data-off="info">
<input type="checkbox" checked name="my-checkbox">
<div id="label-switch" class="make-switch" data-on-label="SIM" data-off-label="N?O">
<input type="checkbox" checked name="my-checkbox">
</div>
</div>
</div>
</div>
</div>
</div>
</form>