我正在使用帶有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"
}
}
任何幫助將不勝感激。