简体   繁体   English

无法连接Bootstrap样式表

[英]Unable to connect the Bootstrap stylesheet

I will be brief and concise as I believe there is a quick fix for my current issue. 我会简明扼要,因为我相信可以快速解决当前问题。 I am using bootstrap using a blank template and I cannot get my stylesheet to connect for some reason? 我正在使用带有空白模板的引导程序,由于某种原因而无法连接样式表? All the files live within the same directory. 所有文件都位于同一目录中。 My patience is wearing thin due to the unnecessary set backs. 由于不必要的后退,我的耐心变得越来越弱。 If you have any answers or suggestions they would be much appreciataed:). 如果您有任何答案或建议,他们将不胜感激:)。 I've posted the HTML below, thanks! 我已经在下面发布了HTML,谢谢!

Justin 贾斯汀

    <!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>Justin A Henderson</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.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>
      <!---jumbotron--->
   <div class="jumbotron">
    <div class="container">
        <h1>Justin Henderson</h1>
    </div>
   </div>


    <!--nav-->
<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>


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

Let's say your HTML file is called justin.html , and it lives in a folder called site : 假设您的HTML文件名为justin.html ,并且位于一个名为site的文件夹中:

site
|
+-- justin.html

Your bootstrap CSS file is shown as ..\\css\\bootstrap.css , which says: go up one level, into the CSS folder, and get bootstrap.css , which would mean you'd need the following directory structure for it to work: 您的引导CSS文件显示为..\\css\\bootstrap.css ,它说:上一层,进入CSS文件夹,并获取bootstrap.css ,这意味着您需要以下目录结构才能工作:

<parent folder>
|
+-- css
|   |
+   +-- bootstrap.css
|
+-- site
    |
    +-- justin.html

But I bet your css folder is actually inside site , along with your js folder, for example: 但是我敢打赌,您的css文件夹实际上与js文件夹一起位于 site ,例如:

site
|
+-- css
|   |
|   +-- bootstrap.css
|
+-- js
|   |
|   +-- bootstrap.min.js
|
+-- justin.html

The correct path would then be: 正确的路径将是:

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

从您的JS链接来看,您似乎链接回的距离过长,请尝试:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM