bootstrap-material-designの導入方法

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/28576/59dcfd2c-5c8a-3983-bc4b-b5020624adbc.png)

[公式のNavbar](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html)を表示する方法です。

# 依存関係
```bash
.
└─┬ bootstrap-material-design#0.3.0
  ├── bootstrap#3.3.5
  └── jquery#2.1.4
```

## 実際に必要なファイル
```
bower_components/jquery/dist/jquery.js
bower_components/bootstrap/dist/css/bootstrap.css
bower_components/bootstrap/dist/js/bootstrap.js
bower_components/bootstrap-material-design/dist/css/material.css
bower_components/bootstrap-material-design/dist/js/material.js
bower_components/bootstrap-material-design/dist/css/ripples.css
bower_components/bootstrap-material-design/dist/js/ripples.js
```

上記ファイルは`bower`経由で

```bash:bash
bower install bootstrap --save
bower install bootstrap-material-design --save
```

というコマンドから、ファイルを入手した場合。

> dependenciesで定義されているので、jqueryは自動でインストールされます。

## CDN
```
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.js
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.css" rel="stylesheet">
```

# main-bower-files
[main-bower-filesから必要ファイルの一覧を取得する](http://qiita.com/59naga/items/02ba2963fd957ef6cf36)場合は

```bash:bash
bower init
# ...
bower install bootstrap --save
bower install bootstrap-material-design --save
```

`bower init`で生成したbower.jsonに`overrides`プロパティを追記する必要があります。
> 0.3.0現在。0.3.1-devでは修正されていますが、まだbowerにアップロードされておらず、github経由でのインストールでも0.3.1-devは使用できませんでした

```json:./bower.json
{
  "name": "getting-started",
  "dependencies": {
    "bootstrap": "~3.3.5",
    "bootstrap-material-design": "~0.3.0"
  },
  "overrides": {
    "bootstrap": {
      "main": [
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    },
    "bootstrap-material-design": {
      "dependencies": {
        "bootstrap": "~3.3.5"
      }
    }
  }
}
```

ファイルが正しく取れるかテストする場合は、以下のようなコードを実行します。

```bash:bash
npm install main-bower-files
# ...
node -e "console.log(require('main-bower-files')().join('\n'))"

# bower_components/jquery/dist/jquery.js
# bower_components/bootstrap/dist/css/bootstrap.css
# bower_components/bootstrap/dist/js/bootstrap.js
# bower_components/bootstrap-material-design/dist/css/material.css
# bower_components/bootstrap-material-design/dist/js/material.js
# bower_components/bootstrap-material-design/dist/css/ripples.css
# bower_components/bootstrap-material-design/dist/js/ripples.js
# bower_components/bootstrap-material-design/dist/fonts/Material-Design-Icons.eot
# bower_components/bootstrap-material-design/dist/fonts/Material-Design-Icons.svg
# bower_components/bootstrap-material-design/dist/fonts/Material-Design-Icons.ttf
# bower_components/bootstrap-material-design/dist/fonts/Material-Design-Icons.woff

# フォントはcssから読み込まれているので無視
```

bootstrapのdependenciesは`less/bootstrap.less`,`dist/js/bootstrap.js`が初期値なので、lessを使いたい人は`bootstrap`プロパティは書かなくてもよいです。

# ripple（波打つようなアニメーション）しない
`$.material.init()`を実行する。

```html
<script>
$(function(){
  $.material.init();
});
</script>
```

# まとめ
body要素内のコードは、[公式のサンプル](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html)の右端あたりをマウスカーソルに合わせると出る「Source Code」をコピーしたものです。

[動作するデモ](http://jsbin.com/sesetevuto/edit?output)

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Available the `bootstrap-material-design`!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.js"></script>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.css" rel="stylesheet">

  <script>
  $(function(){
    $.material.init();
  });
  </script>
</head>
<body>

<div class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="javascript:void(0)">Brand</a>
    </div>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="javascript:void(0)">Active</a></li>
            <li><a href="javascript:void(0)">Link</a></li>
            <li class="dropdown">
                <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)">Action</a></li>
                    <li><a href="javascript:void(0)">Another action</a></li>
                    <li><a href="javascript:void(0)">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Dropdown header</li>
                    <li><a href="javascript:void(0)">Separated link</a></li>
                    <li><a href="javascript:void(0)">One more separated link</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-left">
            <input type="text" class="form-control col-lg-8" placeholder="Search">
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="javascript:void(0)">Link</a></li>
            <li class="dropdown">
                <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)">Action</a></li>
                    <li><a href="javascript:void(0)">Another action</a></li>
                    <li><a href="javascript:void(0)">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="javascript:void(0)">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

</body>
</html>
```