Question

我正在跟随一个名为“Let's Scaffold a Web App”的教程，该教程包含了Grunt，Bower，AngularJS和Bootstrap。我到了最初的脚手架，注意到导航栏没有设置导航栏的样式。换句话说，Bootstrap应该采用有序列表并将其显示为具有漂亮外观的导航栏。结果应如下所示：scaffoldImage 但是，我的导航栏显示普通的HTML，如：

切换导航mytodo ∙首页 ∙关于 ∙联系

我检查了index.html文件，看看是否引用了引导程序分发文件，我在底部看到了以下脚本标记。

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>

它们位于结束“body”和“html”标签之前。所以我假设浏览器可以访问bootstrap.js文件。目录结构与教程here中描述的几乎相同，并且所有文件似乎都在正确的位置。我想我的问题是我不知道如何或何时加载bootstrap.js文件或者需要修改哪个配置文件，因此bootstrap可以做到这一点。

如果我在“head”元素中包含以下链接和src文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

它有效。

我的问题是，“为什么不使用本地安装的引导程序库来设置页面样式？”我希望bower管理我的依赖项，我认为这就是本地安装bootstrap，jquery，angular和其他库的原因。

如果有帮助，这里是以下文件的内容： todo / bowercc -

{
  "directory": "bower_components"
}

todo / bower.json -

{
  "name": "mytodo",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "bootstrap": "^3.2.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "appPath": "app",
  "moduleName": "mytodoApp"
}

todo / bower_components / bootstrap / .bower.json -

{
  "name": "bootstrap",
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
  "keywords": [
    "css",
    "js",
    "less",
    "mobile-first",
    "responsive",
    "front-end",
    "framework",
    "web"
  ],
  "homepage": "http://getbootstrap.com",
  "license": "MIT",
  "moduleType": "globals",
  "main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ],
  "ignore": [
    "/.*",
    "_config.yml",
    "CNAME",
    "composer.json",
    "CONTRIBUTING.md",
    "docs",
    "js/tests",
    "test-infra"
  ],
  "dependencies": {
    "jquery": ">= 1.9.1"
  },
  "version": "3.3.5",
  "_release": "3.3.5",
  "_resolution": {
    "type": "version",
    "tag": "v3.3.5",
    "commit": "16b48259a62f576e52c903c476bd42b90ab22482"
  },
  "_source": "git://github.com/twbs/bootstrap.git",
  "_target": "^3.2.0",
  "_originalSource": "bootstrap"
}

todo / bower_components / bootstrap / bower.json -

{
  "name": "bootstrap",
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
  "keywords": [
    "css",
    "js",
    "less",
    "mobile-first",
    "responsive",
    "front-end",
    "framework",
    "web"
  ],
  "homepage": "http://getbootstrap.com",
  "license": "MIT",
  "moduleType": "globals",
  "main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ],
  "ignore": [
    "/.*",
    "_config.yml",
    "CNAME",
    "composer.json",
    "CONTRIBUTING.md",
    "docs",
    "js/tests",
    "test-infra"
  ],
  "dependencies": {
    "jquery": ">= 1.9.1"
  }
}

非常感谢任何帮助。

Answer 1

您将bootstrap.css与bootstrap.css混淆。

根据问题的描述，缺少指向本地<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">的链接。

尝试添加以下内容：

{{1}}

本地安装的Bootstrap不起作用，但CDN站点的引导程序确实有效

1 个答案: