2015-10-14 101 views
2

我正在使用帶有Grunt,Bower,AngularJS和Bootstrap的Yeoman的標題爲「Let's Scaffold Web App」的教程。我得到了最初的腳手架,並注意到導航欄不是由Bootstrap設計的。換句話說,Bootstrap應該採用一個有序的列表,並將其顯示爲一個帶有漂亮標籤的導航欄。結果應該是這樣的:scaffoldImage 然而,我的導航欄顯示普通HTML一樣:本地安裝引導程序不起作用,但從CDN網站引導工作不起作用

mytodo ∙首頁 ∙關於 ∙聯繫

我檢查了index.html文件

切換導航,查看是否bootstrap分發文件被引用,我在底部看到了下面的腳本標籤。

<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可以做到這一點。

如果我有以下鏈接和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和其他庫本地安裝的原因。

,如果在這裏幫助有以下文件的內容: 待辦事項/ bowercc -

{ 
    "directory": "bower_components" 
} 

待辦事項/ 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" 
} 

待辦事項/ 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" 
} 

待辦事項/ bower_components /引導/ 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" 
    } 
} 

任何幫助將不勝感激。

回答

-1

你很困惑bootstrap.jsbootstrap.css

根據問題描述,鏈接到本地​​bootstrap.css丟失。

嘗試添加以下內容:

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