正确参考文件夹

时间:2019-03-24 19:37:55

标签: css html5 twitter-bootstrap bootstrap-4

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

这是我的文件夹结构:

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

有人可以帮我参考正确的文件夹吗?

请回答“简单”的问题,但我会感谢您的帮助!

1 个答案:

答案 0 :(得分: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>