2016-02-02 howto

使用 Bower

示範如何使用Bower，來套用Materialize

Bower

ICON

Material icons

專案範例

專案資料夾結構

先觀看範例專案的資料夾結構

project/
├── bower.json
├── .bowerrc
└── web
    ├── asset
    │   └── vendor
    │       ├── jquery
    │       └── materialize
    └── index.html

5 directories, 3 files

.bowerrc

project/.bowerrc

1
2
3

{
	"directory": "web/asset/vendor/"
}

bower.json

project/bower.json

{
    "name": "materialize demo",
    "description": "test materialize bower package",
    "dependencies": {
        "materialize": null,
        "jquery": null
    },
    "license": "MIT",
    "homepage": ""
}

使用bower安裝相依套件

1 2	$ cd project $ bower install

網頁範例

參考這篇「說明」和bower的「使用說明」。

Demo

<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- https://design.google.com/icons/ //-->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<!-- https://libraries.io/bower/materialize //-->
	<link type="text/css" rel="stylesheet" href="asset/vendor/materialize/dist/css/materialize.min.css" media="screen,projection" />

	<!-- https://libraries.io/bower/jQuery //-->
	<script type="text/javascript" src="asset/vendor/jquery/dist/jquery.min.js"></script>
	<!-- https://libraries.io/bower/materialize //-->
	<script type="text/javascript" src="asset/vendor/materialize/dist/js/materialize.min.js"></script>

</head>

<body>

</body>

</html>

start