正确参考文件夹

问题描述 投票:0回答:1

我是编码的新手,我在引用正确的文件夹时遇到了一些问题。

这是我的文件夹结构:

folder structure

这是我的HTML代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AGONEX GmbH</title>
    <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
    <link rel="stylesheet" type="text/css" href="/stylesheets/fixed.css" />
  </head>

  <body>
    <nav class="navbar navbar-dark fixed-top">
      <a class="navbar-brand mx-auto" href="#"
        ><img src="/images/agonex.png" alt=""
      /></a>
    </nav>

    <div class="video-background">
      <div class="video-wrap">
        <div id="video">
          <video id="bgvid" autoplay loop muted playsinline>
            <source src="/images/agonex.mp4" type="video/mp4" />
          </video>
        </div>
      </div>
    </div>

    <div class="caption text-center">
      <h1>Lorem</h1>
      <h3>Lorem</h3>
      <a class="btn btn-outline-light btn-lg" href="course">Lorem</a>
    </div>

    <!--- Start Course Section -->
    <div id="course" class="row justify-content-center">
      <div class="col-md-8 text-center">
        <h1>Lorem</h1>
        <p class="lead">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus,
          rem ut quos ex quibusdam nisi!
        </p>
      </div>
    </div>
    <!--- End Course Section -->

    <!--- Script Source Files -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
    <!--- End of Script Source Files -->
  </body>
</html>

现在我的页面看起来像这样:

now

有人可以帮我指一下正确的文件夹。

为“简单”问题而烦恼,但感谢您的帮助!

css html5 twitter-bootstrap bootstrap-4
1个回答
1
投票

您需要将HTML中需要引用的任何文件移动到public目录中。因此,例如,jquery-3.3.1.min.js应该移动到你的public/js目录,而不是你的顶级js目录(浏览器可能看不见......虽然我不能肯定地说没有看到你的app.js文件的内容) 。您的bootstrap-4.3.1-dist目录也是如此 - 您可以将整个目录移动到public目录中。

然后在HTML代码中,您可以像这样引用您的jQuery和Bootstrap源文件:

<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
© www.soinside.com 2019 - 2024. All rights reserved.