Html Twitter引导CSS未加载？_Html_Css_Twitter Bootstrap

Html Twitter引导CSS未加载？

html css twitter-bootstrap

Html Twitter引导CSS未加载？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我对web开发不熟悉，正在尝试使用BootstrapV3.20创建一个站点这是我的项目结构 bootstrap/ |---index.html ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── jumbotron-narrow.css │ ├── styles.css //blank │ └── bootstrap-theme.

我对web开发不熟悉，正在尝试使用BootstrapV3.20创建一个站点这是我的项目结构

bootstrap/
|---index.html
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── jumbotron-narrow.css
│   ├── styles.css             //blank
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   ├── jquery-1.10.2.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

index.html 这是From的自举网站，因为我正在使用该框架进行测试

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Narrow Jumbotron Template for Bootstrap</title>  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!--<link href="/css/styles.css" rel="stylesheet"> -->
    <!-- Custom styles for this template -->
    <link href="jumbotron-narrow.css" rel="stylesheet"> 
  </head>
  <body>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <h3 class="text-muted">Project name</h3>
      </div>
      <div class="jumbotron">
        <h1>Jumbotron heading</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
      </div>
      <div class="row marketing">
        <div class="col-lg-6">
          <h4>Subheading</h4>
          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

          <h4>Subheading</h4>
          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

          <h4>Subheading</h4>
          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
        <div class="col-lg-6">
          <h4>Subheading</h4>
          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

          <h4>Subheading</h4>
          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

          <h4>Subheading</h4>
          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
      </div>
      <div class="footer">
        <p>&copy; Company 2014</p>
      </div>
    </div> 
  </body>
</html>

尝试在Chrome中启动时使用index.html

正如我所说，我对web开发还是很陌生，所以我确信这是显而易见的。任何帮助都将不胜感激

要澄清评论：CSS标签指向一个绝对URL：

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

会有用的

站点可以位于web根目录下，也可以位于更高级别或更高级别，具体取决于您如何设置服务器。在您的本地开发可能处于与生产环境不同的级别的开发环境中，您经常会看到这种情况—在这种情况下，相对链接将以任何一种方式工作，但绝对链接将以其中一种方式断开

相对位置通常在资源位于相对于页面的位置时效果最好，比如静态HTML文件。如果您使用的是ASP.NET之类的框架，尤其是在使用部分视图或用户控件时，您可以定义一个相对于应用程序的链接，而不是相对于页面的链接，并让它来完成这项工作。

查看绝对路径与相对路径-看起来这是您的问题。就是这样，谢谢！

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