【问题标题】:bootstrap not working, file not found引导程序不起作用,找不到文件
【发布时间】:2016-03-03 07:05:00
【问题描述】:

我正在尝试在我正在为大学作业设计的网站中使用 bootstrap framework,尽管我尽了最大努力,但 bootstrap 并不想很好地发挥作用。

在 Chrome 中打开页面后,我可以打开控制台,但它抱怨找不到引导文件(请参阅 [img])。我在名为 httpdocs 的文件夹中有 html 文件,在 assets 文件夹中有一个名为 assets 的文件夹,其中包含 js、css 和 img 文件夹。链接如下:

<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css>" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>

我对 html/css/jquery 并不完全陌生,据我所知路径应该正确链接,但由于某种原因它不是。有什么想法吗?

[

<!-- start section body -->
    <div class="container>  
        <div class="row">
            <div class="span9">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
            </div>
        </div>
    </div> 

只是为了涵盖所有基础,我应该这样标记它吗?我在页面左侧有一个侧边栏,从页面的最左侧跨越220px,我希望段落中的文本不会被该侧边栏隐藏。考虑到这一点,我如何将段落的 div 偏移到侧边栏边缘和屏幕边缘之间的中心?

我看到使用以下内容的教程。这是旧版本的引导程序还是我试图使用错误的东西?

<div class="col-lg-9 col-lg-offset-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

【问题讨论】:

  • 请显示您加载/需要引导文件的代码
  • 像 span9 这样的类适用于旧版本的 bootstrap,而像 col-* 这样的类适用于较新版本的 bootstrap。你在尝试什么版本?
  • 使用 col-lg-9 col-lg-offset3 的 sn-p 是最新的 afaik。我通常在使用引导列格式时使用这些类。它应该会为您产生所需的效果。
  • 我已更新 OP 以包含链接文件的代码。我正在使用我认为的最新稳定版本; v3.3.6 注意:我确实尝试了 col-lg-9 col-lg-offset9 并给出了相同的结果。
  • 首先,您的样式表的href 值包含一个尾随&gt;

标签: jquery html css twitter-bootstrap


【解决方案1】:

我可以在href 属性的值中看到一个额外的&gt;

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

不确定这是错字还是您的实际代码是这样的。

您还可以提供其他两个未找到的资产的链接以确认问题。

【讨论】:

  • 应该是评论吧。
【解决方案2】:

可能是因为相对路径不对。如果您告诉我们项目结构,我们可以调试它。 暂时你可以使用引导 CDN

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

【讨论】:

    【解决方案3】:

    好的,使用引导 CDN 确实可以解决问题,但另一种解决方案是删除文件路径中的尾随 >。

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

    修改为

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

    解决了问题

    【讨论】:

      【解决方案4】:

      确保您提供的路径正确(始终适用于任何文件)。 在您的情况下,引导 css 文件路径的末尾有额外的 &gt;

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

      改成

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

      【讨论】:

        【解决方案5】:

        您的快照中ERR_FILE_NOT_FOUND 错误中的文件路径url 清楚地表明您是直接在chrome 中访问网页,而不是通过web-server

        首先我想指出,即使 Chrome 能够打开一个“local”文件,也有很多事情容易出错。

        接下来,像bootstrap 这样的框架不仅仅是一个普通的HTML 文件,它们被设计为通过web-server 访问。

        假设您终于能够修复所有目录路径和链接,那又如何?无论如何,这个“固定”代码肯定无法在服务器上运行。 因此,尝试“修复”某些内容之前,我建议您首先尝试通过本地环境中的 WAMP/LAMP 堆栈访问此站点。

        这很简单,如果你在 linux 上,那么你可以查找“安装 LAMP”。如果您在 Windows 上(似乎是这种情况),那么我建议您使用这个可移植的 uWamp 堆栈。你甚至不需要安装它或关心像 apache/mysql 这样的服务器。

        只需将存档解压缩到一个目录,然后将您的代码复制到根目录下的www 文件夹。您需要做的就是运行位于根目录中的UwAmp.exe,一旦标志变为绿色,您就可以通过此链接访问代码。 http://localhost/

        【讨论】:

        • 没必要,这是链接 bootstrap.css 的路径中的拼写错误
        • 好的,酷!!我只是想解决根本原因:) 如果您希望在没有本地服务器的情况下继续开发,很好。
        • 根本原因是我的代码中的拼写错误,而不是我没有使用网络服务器查看我的网站...
        • 是的,你是对的,我错了,我更关注开发标准,不知怎的漏掉了笔误。
        猜你喜欢
        • 1970-01-01
        • 2014-06-18
        • 2021-12-11
        • 1970-01-01
        • 1970-01-01
        • 2016-07-23
        • 2015-03-21
        • 2015-02-04
        • 1970-01-01
        相关资源
        最近更新 更多