use*_*523 12 html jquery select twitter-bootstrap
我是新手.我正在尝试Bootstrap-select,但我没有像这里得到所需的效果https://developer.snapappointments.com/bootstrap-select/.我已下载文件并指向头部的CSS和JS.我已经在头部启用了Bootstrap-select,但仍然无法工作 - 我只是获得默认外观.这是我的完整代码.我在这做错了什么？任何提示将不胜感激.
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<link href="bootstrap-master/docs/assets/css/bootstrap.css" rel="stylesheet" />
<link href="bootstrap-master/docs/assets/css/bootstrap-select.css" rel="stylesheet" />
<script src="bootstrap-master/docs/assets/js/bootstrap-select.js" type="text/javascript"></script>
<script>
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
</script>
</head>
<body>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</body>
</html>
Dav*_*vid 21
我遇到了类似的问题.这是一个工作示例,对于像我这样的人稍后提出这个问题.
请注意,您必须包含2个CSS文件和3个JavaScript文件.
$(document).ready(function(e) {
$('.selectpicker').selectpicker();
});<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
});
你的脚本声明,所以执行前的<select class="selectpicker">-declaration,造成引导,选择从不被初始化OPON .selectpicker(当脚本拼命地跑selectpicker犯规存在).所以把它放在document(ready)HTML中或之后.
包括jQuery库和bootstrap js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap-master/docs/assets/js/bootstrap.min.js" type="text/javascript"></script>
和编码为
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
});
注意： 始终使用缩小的CSS和JS，以提高页面速度
| 归档时间： |
|
| 查看次数： |
85470 次 |
| 最近记录： |