Question

我已经搜索了其他问题，但我没有得到任何真正解决我问题的东西。我下载了一个模板，我希望将其用作自己的小型投资组合。在我的本地服务器上一切正常。但是当我将它上传到实时服务器时会出现问题。我相信问题出在Bootstrap.js或bootstrap-theme.css

上

某些功能未运行且根本不显示。比如打开网站时的加载栏，背景，一些图像和箭头。

我做了以下事情。

检查所有路径以确保它们正确无误。确保它不是缓存问题。试图在私人视图中运行它（仍然是同样的问题）检查了firefox错误日志，但似乎加载了所有脚本。

以下是模板演示 - http://designova.net/presence/index01.html

这是我的实时版本 - codethis.co.za

这是头部的代码和底部的js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code This -  Beautiful Website Design and More</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="http://www.codethis.co.za/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="http://www.codethis.co.za/bootstrap/js/bootstrap.js" ></script>
<script src="http://www.codethis.co.za/javascripts/jquery.easing.1.3.js" type="text/javascript"></script>

<!-- Standard Favicon--> 
<link rel="shortcut icon" href="images/favicon/favicon.ico">

<!-- Standard iPhone Touch Icon--> 
<link rel="apple-touch-icon" sizes="57x57" href="images/touchicons/apple-touch-icon-57-precomposed" />
<!-- Retina iPhone Touch Icon--> 
<link rel="apple-touch-icon" sizes="114x114" href="assets/touchicons/apple-touch-icon-114-precomposed" />
<!-- Standard iPad Touch Icon--> 
<link rel="apple-touch-icon" sizes="72x72" href="assets/touchicons/apple-touch-icon-72-precomposed" />
<!-- Retina iPad Touch Icon--> 
<link rel="apple-touch-icon" sizes="144x144" href="assets/touchicons/apple-touch-icon-144-precomposed" />

<!-- Bootstrap CSS Files -->
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
<!-- Custom Fonts Setup via Font-face CSS3 -->
<link href="http://www.codethis.co.za/fonts/fonts.css" rel="stylesheet">

<!-- CSS files for plugins -->
<link href="http://www.codethis.co.za/stylesheets/pace.preloader.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/animate.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.carousel.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.theme.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/magnific-popup.css" rel="stylesheet" > 
<link href="http://www.codethis.co.za/stylesheets/jquery.tweet.css" rel="stylesheet"/>
<link href="http://www.codethis.co.za/stylesheets/foliohover.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/fancymenu.css"  rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/intro.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/pricing.css" rel="stylesheet">

<!-- Main Template Styles -->
<link href="stylesheets/main.css" type="text/css" rel="stylesheet">
<!-- Main Template Responsive Styles -->
<link href="stylesheets/main-responsive.css" type="text/css" rel="stylesheet">
<!-- Main Template Retina Optimizaton Rules -->
<link href="stylesheets/main-retina.css" type="text/css" rel="stylesheet">
<!-- LESS stylesheet for managing color presets -->

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<!-- LESS JS engine-->
<script src="http://www.codethis.co.za/less/less-1.5.0.min.js" type="text/css"></script>
<script src="http://www.codethis.co.za/javascripts/modernizr.custom.js"></script>

 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="bootstrap/js/html5shiv.js"></script>
      <script src="bootstrap/js/respond.min.js"></script>
    <![endif]-->

<style>
    .full-height{
        height: 100%;
    }
</style>
</head>

并在底部

<!-- JS Plugins -->
<script src="javascripts/pace.min.js"></script>
<script src="javascripts/retina.js"></script>
<script src="javascripts/device.min.js"></script>
<script src="javascripts/owl.carousel.js"></script>
<script src="javascripts/waypoints.min.js"></script>
<script src="javascripts/jquery.tweet.js"></script>
<script src="javascripts/okvideo.js"></script>
<script src="javascripts/jquery.mixitup.js"></script>
<script src="javascripts/flexslider.js" ></script> 

<script src="javascripts/jquery.magnific-popup.js"></script> 
<script src="javascripts/smooth-scroll.js"></script>
<script src="javascripts/form-validation.js"></script>
<script src="javascripts/classie.js"></script>
<script src="javascripts/fancymenu-rollin.js"></script>
<!-- Scroll Animations Setup -->
<script src="javascripts/wow.js"></script>
<script src="javascripts/animations-init.js"></script>
<!-- Custom Scripts Setup -->
<script src="javascripts/carousel-init.js" ></script> 
<script src="javascripts/portfolio.js"></script>
<script src="javascripts/intro.js"></script>
<script src="javascripts/main.js"></script>

请有人帮我解决这里发生的事情

Answer 1

您的网页上有404错误，这意味着（1）您的路径不正确，或者（2）服务器上不存在这些文件。

404 errors in Chrome console

要查看的是您是使用JS，CSS和图像资源的相对路径还是绝对路径。记住：

以/开头的路径将解析为http://codethis.co.za/<path>
不以/开头的路径将相对于当前路径

也许您错过了路径中的子文件夹？

Answer 2

首先，您似乎在加载某些字体时遇到问题（跨域）它不应该与您的问题相关联，但您应该修复它。

您还有：

Uncaught ReferenceError: $ is not defined

这可能与你的JQuery相关，如果你大量使用它，这可以解释很多。

从我在网络中看到的情况来看，我没有任何丢失的图像。

蒂鲍特

Bootstrap js未在Live服务器上加载

2 个答案: