带引导程序的jQuery脚本命令 [英] script order for jquery with bootstrap
问题描述
我是jquery和bootstrap的新手，我无法让他们与对方很好地玩。我有一个包含bootstrap下拉和jquery滑块的页面。但是，我无法让他们两人同时工作。
引导下拉菜单可以处理这个文件，并且滑块可以打破
< html lang =en>
< head>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.csstype =text / cssmedia =all/>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js\"> ;</script>
< script src =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.jstype =text / javascript>< /脚本>
< link href =/ bootstrap / css / bootstrap.min.css =stylesheetmedia =screen>
< script src =/ js / slider_input.js>< / script>
< / head>
< body>
....
< script src =/ bootstrap / js / bootstrap.min.js>< / script>
< / body
< / html
删除倒数第二行，如下所示：
滑块工作，引导程序下拉打破
< html lang =en>
< head>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.csstype =text / cssmedia =all/>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js\"> ;</script>
< script src =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.jstype =text / javascript>< /脚本>
< link href =/ bootstrap / css / bootstrap.min.css =stylesheetmedia =screen>
< script src =/ js / slider_input.js>< / script>
< / head>
< body>
....
< script src =/ bootstrap / js / bootstrap.min.js>< / script>
< / body
< / html
哦，现在我看到对不起。你必须先加载你的实际jQuery，否则UI也不行。所以这应该是头部
< script src =// ajax.googleapis.com/ajax/libs/jquery/ 1.10.1 / jquery.min.js>< /脚本>
< script src =// ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.jstype =text / javascript>< / script>
< script src =/ bootstrap / js / bootstrap.min.js>< / script>
< script src =/ js / slider_input.js>< / script>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.csstype =text / cssmedia =all/>
< link href =/ bootstrap / css / bootstrap.min.css =stylesheetmedia =screen>
同样在html5中，您需要忽略'type =text / javascript'，就像bootstrap之一，也是consisten，所以如果你有它，也可以将它添加到bootstrap中，它与加载规则有关。
I'm new to jquery and bootstrap, and I can't get them to play nicely with each other. I have a page with both bootstrap dropdowns and jquery sliders. However, I can't get both of them to work at the same time.
Bootstrap dropdowns work with this file, and sliders break
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="/js/slider_input.js"></script>
</head>
<body>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body
</html
By removing the second to last line like so:
Sliders work, and bootstrap dropdowns break
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="/js/slider_input.js"></script>
</head>
<body>
....
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body
</html
oh yeah now i see sorry. You have to load your actual jquery first, else UI won't work either. So this should be the head
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/slider_input.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
Also in html5 you need to leave off the 'type="text/javascript"', like the bootstrap one, also be consisten, so if you have it on the other, also add it to the bootstrap, it has to do with loading rules.
这篇关于带引导程序的jQuery脚本命令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
