gpt4 book ai didi

javascript - jquery、jquery-ui 和 bootstrap 的 CSS 和 Javascript 顺序

转载 作者:行者123 更新时间:2023-11-28 05:50:24 24 4
gpt4 key购买 nike

在我的本地和内部(可在公司网络内访问)服务器上,jquery-ui slider 显示在所有页面上,但是,在我们的外部服务器(公司外部的外部客户端)上, slider 不会显示在任何页面上页。

最初,我将所有 jquery 文件都指向 googelapis.com CDN。我认为这可能是问题所在,因此我将所有文件复制到本地目录中并指向页面上的这些文件。 slider 仍然无法工作。

我现在想知道文件是否需要特定的顺序才能查看它们。我了解到 javascript 文件应该位于页面底部(除非 DOM 布局需要它们),而 .css 文件始终位于页面头部。然而,我在SO Script order for jquery with bootstrap上看到了一个帖子其中 jquery.js、jquery-ui.js 和 bootstrap.js 位于 <head> 中标记以及自定义 .js 文件和 .css 文件。由于OP检查了这个答案作为解决方案,我将尝试重新排序我的文件,看看是否可以解决我的问题。

问题:什么时候应该将js文件放在<head>中,尤其是 jquery 和 bootstrap JS 文件?如果我需要这样做,我只会在使用 slider 的页面上使用此重新排序,因为我不确定此重新排序将如何影响网站的其余部分。

另外,我想知道为什么我们的外部服务器不显示 slider ,但我的本地(xampp)以及我们的内部服务器确实显示 slider - 我根本不需要重新排序它们。有人遇到过这个特殊问题吗?

截图:

本地/内部服务器 View

local/internal

外部服务器 View

external

这是我的文件的当前顺序:

<head>
<link rel="stylesheet" href="css/jquery-ui-1-11-4.min.css">
<link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.structure.css">
<link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.theme.min.css">

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-custom.css">

<link rel="stylesheet" href="css/styles.css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link rel="stylesheet" href="css/ie10-surface-vp.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
<!-- Custom styles for this template -->
<link rel="stylesheet" href="css/navbar-fixed-top.css">

</head>


<!-- body content here -->



<!-- before end body -->
<script src="js/jquery-1-11-3.min.js"></script>
<script src="js/jquery-ui-1-11-4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-toggle-2-2-2.min.js"></script>

最佳答案

Bootstrap documentation为此建议将 JS 放在 HTML 文件的末尾。

<!DOCTYPE html>
<html lang="en">
<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 href="css/bootstrap.min.css" rel="stylesheet">

<!-- 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>
<h1>Hello, world!</h1>

<!-- 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>

关于javascript - jquery、jquery-ui 和 bootstrap 的 CSS 和 Javascript 顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38131381/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com