Twitter Bootstrap 安装问题答案

【问题标题】：Twtitter Bootstrap installation issuesTwitter Bootstrap 安装问题
【发布时间】：2014-03-18 21:56:45
【问题描述】：

首先，我想说的是，我已经搜索了高低，阅读了本网站上的多个教程和一些帖子，但没有帮助，所以我决定自己发帖。

我正在尝试使用 Twitter Bootstrap 自学 Web 开发/服务器管理，因为我已经具备 HTML 和 CSS 的一些背景知识。据我所知，我已经正确安装了 LAMP 堆栈和所有依赖项。

我的文件结构如下：

/var/www/
/var/www/icyou/
/var/www/icyou/bootstrap

-检查引导程序时创建的所有文件，保持不变-
/var/www/icyou/site_root/

index.html

index.html.save

testphp.php

我的 index.html 里面是 Twitter Bootstrap 的默认模板，如下：

<!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">
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <a href="#" class="btn"> It works</a>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

我在 index.html 中更改的唯一与模板不同的是<a href="#" class="btn"> It works</a>。

我正在关注 youtube 上的教程集，该教程显示该按钮应具有鼠标悬停效果，并且文本应采用流行的 bootstrap sans-sarif 字体。我的看起来像原始 HTML。

我希望它像我不知道的依赖问题一样简单。安装所有这些软件包真的很令人沮丧。似乎除了我之外的每个人都对依赖范围有天生的了解，所以没有人提到它。

编辑：我也尝试过暂时将路径更改为完整路径：

<link href="/var/www/icyou/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/var/www/icyou/bootstrap/dist/js/bootstrap.min.js"></script>

【问题讨论】：

您的文件结构与引导 CSS 文件的路径不匹配。您需要将引导 css 文件放在名为 CSS 的文件夹中，该文件夹是您拥有 index.html 的位置的子文件夹。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您是否检查了文件夹 /var/www/icyou/site_root/ 的权限？此外，您可能想打开“检查元素”对话框（如果您使用的是 chrome），它肯定会说明您的 css 链接发生了什么

【讨论】：

【解决方案2】：

如果我对问题的理解正确，当您将鼠标悬停在按钮上时，您没有看到“悬停”效果吗？

Bootstrap 处理单个元素上的多个类，例如，如果我要实现一个按钮，我会执行以下操作：

Btn-primary 为按钮分配颜色 btn-md 指定按钮的大小。简单地使用“btn”将为您提供最低限度。

尝试向按钮添加一些额外的类属性，看看是否有帮助。

【讨论】：

【解决方案3】：

我想通了！这两个答案都非常有帮助，但评论更接近我遇到的问题。这是我的想法和相对路径问题。我的引导文件夹位于我的 apache 文档根目录上方的目录中，显然您的路径不能超出文档根目录的范围！

新路径如下所示<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

【讨论】：