Question

我一直在尝试制作一个带有一些Bootstrap功能的简单静态网页。我在AWS ec2实例上设置了LAMP服务器来完成此任务。

为了尝试一些事情，我只是想使用一个jumbotron来确保我能够将bootstap库连接到我的html页面。我在某个时候完成了这个，但是我停止了这个工作，并在几周后回来继续。我拿起了我离开的地方，使用相同的代码，但这一次，我工作的jumbotron不再存在。基本上，我制作的html页面是一个典型的html页面，具有普通字体，没有jumbotron效果。我的代码如下：

<!DOCTYPE html>

<html lang="en">

<head>
<title>Test</title>

<meta charset="utf-8">
<!--meta tag viewport purpose is to scale screen correctly-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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


</head>

<body>

<div class = "jumbotron">
    <div class = "container"> 
      <h1>Welcome to landing page!</h1>
     <p>This is an example for jumbotron.</p>
  </div>
</div>


</body>



</html>

我提到过这是在AWS ec2实例中完成的。所以假设我的html文件的路径是/ var / www / html。 html目录包含我的.html文件，这是我的静态网页，还包含从bootstrap下载的js，fonts和css目录。所以...再一次，html目录内容是：

css custom.css fonts js Will.html

我对如何单独留下代码感到困惑，几周后回来后，jumbotron不再工作了。最初有一个主引导程序目录，其中包含css，fonts和js目录，但我刚刚摆脱了主目录并将三个目录放在与html页面相同的级别。但这不重要，我只是改变了那些目录的路径。我在aws ec2实例上更新了我的LAMP服务器，所以这可能会导致问题。但不确定，如何让这个jumbotron工作的任何帮助都会很棒。

感谢。

Answer 1

试试这个

<!DOCTYPE html>

<html lang="en">

<head>
<title>Test</title>

<meta charset="utf-8">
<!--meta tag viewport purpose is to scale screen correctly-->
<meta name="viewport" content="width=device-width, initial-cale=1.0">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link href="custom.css" rel="stylesheet" >


</head>

<body>

<div class = "jumbotron">
    <div class = "container"> 
      <h1>Welcome to landing page!</h1>
     <p>This is an example for jumbotron.</p>
  </div>
</div>


</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</html>

将HTML页面连接到Bootstrap（jumbotron）

1 个答案: