Material Design for Bootstrapを利用してみた

# 初めに
Googleが提唱した新しいデザインガイドライン「Material Design」が最近熱いと聞きます。
Material Designは操作に対して反応が返ってくるため、操作感がありサイトの印象がが他のサイトと比べて強いと自分は感じました。
そこで、BootstrapのテーマでMaterial Designが使えると知り触ってみたので、書いていこうと思います。

# Material Design for Bootstrap

## 導入

[公式サイト](http://fezvrasta.github.io/bootstrap-material-design/)

Material Design for Bootstrapの公式サイトではElementsの動きを確認できます。

また、[Bootstrap elements](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html)のページにはサンプルコードがあります。

導入は[Getting Started](http://fezvrasta.github.io/bootstrap-material-design/#getting-started)にbower,meteorを使ったインストールの仕方が書いてあります。bower,meteorを使わない場合は[ここから](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html)Downloadでzipをダウンロードして解凍してください。

## ファイルの読み込み

### CSS

```html
<link rel="stylesheet" type="text/css" href="任意のパス/bootstrap.css">
<link rel="stylesheet" type="text/css" href="任意のパス/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="任意のパス/ripples.css">
```

まず、head部分に該当のcssを読み込みます。最初にお馴染みのbootstrap.cssです。zipでダウンロードした場合bootstrap.cssは無いと思うので別途[公式サイト](http://getbootstrap.com/getting-started/)からダウンロードしてください。
次に、bootstrap-material-design.css、ripples.cssを読み込みます。これでcssの読み込みは終わりです。
あとは、お好みでGoogleが提供しているMaterial Designに合ったアイコンやフォントを読み込みましょう。

```html
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

robotoはAndroidとChrome OSで標準フォントと利用されているほか、Material Designの推奨フォントにもなっています。
また、Material IconsはMaterial Designに対応したアイコンです。

### JS

```html
<script src="任意のパス/jquery.js"></script>
<script src="任意のパス/bootstrap.js"></script>
<script src="任意のパス/material.js"></script>
<script src="任意のパス/ripples.min.js"></script>
<script>
    $.material.init();
</script>
```

まず、お馴染みのjQueryを読み込みます。zipでダウンロードした場合jquery.jsは無いと思うので別途[公式サイト](https://jquery.com/)からダウンロードしてください。次にbootstarp.js、material.js、ripples.jsを読み込みます。
読み込みをしたら、`$.material.init()`を実行して準備完了です。

## 使い方

[Getting Started](http://fezvrasta.github.io/bootstrap-material-design/#getting-started)のページにサンプルソースがあるのでこちらを参考しにしていきます。

### Navbar

#### キャプチャ

<img width="1155" alt="スクリーンショット 2015-12-12 16.05.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/8281d83e-5c45-cbe8-6e5f-a4662c73de03.png">

#### ソース

```html
<div class="navbar navbar-default">
  <div class="container-fluid">
    <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">
        <div class="form-group">
          <input type="text" class="form-control col-md-8" placeholder="Search">
        </div>
      </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>
</div>
```

色の変更は`<div class="navbar navbar-default">`を変更することで実現できます。
緑色は`<div class="navbar navbar-default">`、オレンジ色は`<div class="navbar navbar-warning">`
また`<div class="navbar navbar-inverse">`と指定することで反転し青っぽくなります。

色の指定は下記になります。
<img width="271" alt="スクリーンショット 2015-12-12 16.32.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/3806f554-6dbb-49fc-311b-2b58d052a89c.png">
この指定はBootstrapでは馴染みあるためBootstrap利用者は今まで通りに利用できると思います。

### Flat Buttons

#### キャプチャ

<img width="410" alt="スクリーンショット 2015-12-12 16.44.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/80ceecdf-e634-ae69-6760-d447cab3af96.png">

#### ソース

```html
<a href="javascript:void(0)" class="btn"><code>btn</code> only</a>
<a href="javascript:void(0)" class="btn active"><code>.active</code></a>
<a href="javascript:void(0)" class="btn btn-default">Default</a>
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-success">Success</a>
<a href="javascript:void(0)" class="btn btn-info">Info</a>
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
<a href="javascript:void(0)" class="btn btn-link">Link</a>
```

こちらはマウスオーバーすることで、ボタンの境界線が表示されます。
ボタンをクリックすることでクリックした位置から波上のエフェクトが実行されます。
また、クリックすることでボタンの境界線が表示され続けます。

<img width="424" alt="スクリーンショット 2015-12-12 16.50.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/b0436ae1-3441-1b2e-2673-f5a37555749b.png">

### Raised buttons

#### キャプチャ

<img width="422" alt="スクリーンショット 2015-12-12 16.54.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/cc13febf-a324-5e81-e6e1-6d0ff5fdf443.png">

#### ソースコード

```html
<a href="javascript:void(0)" class="btn btn-raised active"><code>.active</code></a>
<a href="javascript:void(0)" class="btn btn-raised btn-default">Default</a>
<a href="javascript:void(0)" class="btn btn-raised btn-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-raised btn-success">Success</a>
<a href="javascript:void(0)" class="btn btn-raised btn-info">Info</a>
<a href="javascript:void(0)" class="btn btn-raised btn-warning">Warning</a>
<a href="javascript:void(0)" class="btn btn-raised btn-danger">Danger</a>
<a href="javascript:void(0)" class="btn btn-raised btn-link">Link</a>
```

こちらは、マウスオーバーしても変化はありませんが、クリックすることで影が強くなります。
↓SUCCESSをクリック

<img width="432" alt="スクリーンショット 2015-12-12 17.03.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/e3546f8d-2276-4258-6a23-eb67e31062fa.png">


### Floating action buttons

#### キャプチャ

<img width="396" alt="スクリーンショット 2015-12-12 17.08.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/de932d9a-6b49-ceb1-faab-761fb5c2c303.png">

#### ソースコード

```html
<a href="javascript:void(0)" class="btn btn-default btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-primary btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-success btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-info btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-warning btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-danger btn-fab"><i class="material-icons">grade</i></a>
```

こちらは丸いボタン。GoogleのMaterialIconsを利用しています。


### Button groups

#### キャプチャ

<img width="216" alt="スクリーンショット 2015-12-12 17.14.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/5c37e54e-c8a3-87b7-ee9e-dde3c7a09303.png">

<img width="221" alt="スクリーンショット 2015-12-12 17.17.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/60cd3265-a3ff-4269-850d-f5da8a82ec10.png">

#### ソースコード

```html
<div class="btn-group">
    <a href="javascript:void(0)" class="btn btn-primary btn-raised">Primary raised</a>
    <a href="bootstrap-elements.html" data-target="#" class="btn btn-primary btn-raised dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></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>
</div>
```

ドロップダウンで表示されるボタンリストです。Navbarのところでも利用されていました。


### Tables

#### キャプチャ

<img width="973" alt="スクリーンショット 2015-12-12 17.29.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/d94ac0de-acbc-074f-473a-5123fa297619.png">

#### ソースコード

```html
<table class="table table-striped table-hover ">
  <thead>
  <tr>
    <th>#</th>
    <th>Column heading</th>
    <th>Column heading</th>
    <th>Column heading</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="info">
    <td>3</td>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="success">
    <td>4</td>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="danger">
    <td>5</td>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="warning">
    <td>6</td>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="active">
    <td>7</td>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  </tbody>
</table>
```

マウスオーバーで色が変わります。

### Form Email

#### キャプチャ

<img width="380" alt="スクリーンショット 2015-12-12 17.40.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/fccd72b5-8a3b-7094-1d62-6af1d08fa73b.png">


<img width="380" alt="スクリーンショット 2015-12-12 17.37.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/0f8e3b9f-9865-97bf-3a3f-75afdd725859.png">

<img width="463" alt="スクリーンショット 2015-12-12 17.41.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/1d2e2547-7de0-3c9d-6787-cbc581c58059.png">

#### ソースコード

```html
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
```

フォーカスを当てると下線が中心から色が変わっていきます。


### Form Password

#### キャプチャ

<img width="380" alt="スクリーンショット 2015-12-12 17.47.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/6c634fc1-3738-e59b-0b1b-876c5551d3d9.png">

<img width="380" alt="スクリーンショット 2015-12-12 17.48.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/a3c3bb59-a771-e49f-f384-c2c203293128.png">

#### ソースコード

```html
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
```


### Form Text 1

#### キャプチャ

<img width="380" alt="スクリーンショット 2015-12-12 18.15.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/7e77964e-a95a-c3e1-0929-7d1b6a5b26c3.png">

<img width="380" alt="スクリーンショット 2015-12-12 18.17.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/72b59e34-3a68-c13d-201b-b2cfe15e2b81.png">



#### ソースコード

```html
<div class="form-group label-floating">
    <label class="control-label" for="focusedInput1">Write something to make the label float</label>
    <input class="form-control" id="focusedInput1" type="text">
</div>
```

テキストフォームにフォーカスを合わせると文章が上にずれ、文字を入力できるようになります。
この動きが可愛かったりと思ったり。


### Form Text 2

#### キャプチャ

<img width="386" alt="スクリーンショット 2015-12-13 12.41.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/94d94d55-3340-7643-51f8-12581528fccb.png">

<img width="388" alt="スクリーンショット 2015-12-13 12.42.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/584d9e1e-b573-990c-0726-3f81316140c0.png">

#### ソースコード

```html
<div class="form-group label-floating">
    <label class="control-label" for="focusedInput2">Focus to show the help-block</label>
    <input class="form-control" id="focusedInput2" type="text">
    <p class="help-block">You should really write something here</p>
</div>
```

こちらはForm Text 1とは違ってフォーカスを当てると下に文章が表示されます。

### Checkbox

#### キャプチャ

<img width="335" alt="スクリーンショット 2015-12-13 13.08.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/75d50357-ce10-669d-4f25-55522bcfba06.png">


#### ソースコード

```html
<div class="checkbox">
    <label>
        <input type="checkbox"> Java
    </label>
    <label>
        <input type="checkbox"> PHP
    </label>
</div>
```

クリックすると輪っかのアニメーションが表示されチェックが付きます。

### Toggle button

#### キャプチャ

<img width="174" alt="スクリーンショット 2015-12-13 13.20.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/19a02519-a0ee-4d8a-9160-12bc906692c7.png">

<img width="174" alt="スクリーンショット 2015-12-13 13.20.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/de9745ba-5038-0fe2-8f40-953bbdded3a0.png">

#### ソースコード

```html
<div class="togglebutton">
    <label>
        <input type="checkbox" checked=""> Toggle button
    </label>
</div>
```

クリックすると輪っかのアニメーションを表示しながらトグルが動きます。

### Form File

#### キャプチャ

<img width="421" alt="スクリーンショット 2015-12-13 13.28.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/257cfa74-8b0c-58fe-0b50-071f48dc75d0.png">

<img width="421" alt="スクリーンショット 2015-12-13 13.28.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/b18eede2-e939-b7b6-23ea-eba6afe0428d.png">

#### ソースコード

```html
<div class="form-group">
    <label for="inputFile" class="control-label">File</label>
    <input type="text" readonly="" class="form-control" placeholder="Browse...">
    <input type="file" id="inputFile" multiple="">
</div>
```

### Radio button

#### キャプチャ

<img width="404" alt="スクリーンショット 2015-12-13 13.35.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/fecbec71-935a-7351-e566-a976ac2d9464.png">

#### ソースコード

```html
<div class="form-group">
    <label class="control-label">Radios</label>
    <div class="radio radio-primary">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""> Option one is this
        </label>
    </div>
    <div class="radio radio-primary">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else
        </label>
    </div>
</div>
```

クリックすると輪っかのアニメーションを表示されます。

### Select Box

#### キャプチャ

<img width="394" alt="スクリーンショット 2015-12-13 22.27.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/8ff13e46-4f5f-6fca-8160-51f991d8bfad.png">

<img width="394" alt="スクリーンショット 2015-12-13 22.31.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/7742ecf0-f1f1-424d-a68d-b2f71798582c.png">


#### ソースコード

```html
<div class="form-group">
    <label for="select111" class="control-label">Select</label>
    <select id="select111" class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
```


### Select Box Multiple

#### キャプチャ

<img width="390" alt="スクリーンショット 2015-12-13 22.34.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/8c9748a5-6ccf-a8aa-0d65-63c1dee1c91d.png">

#### ソースコード

```html
<div class="form-group">
    <label for="select222" class="control-label">Select Multiple</label>
    <select id="select222" multiple="" class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
```

### Breadcrumbs

#### キャプチャ

<img width="382" alt="スクリーンショット 2015-12-13 22.44.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/954ff3bd-78cf-b5d8-6a84-8d20d4345683.png">


#### ソースコード

```html
<ul class="breadcrumb" style="margin-bottom: 5px;">
    <li><a href="javascript:void(0)">Home</a></li>
    <li><a href="javascript:void(0)">Library</a></li>
    <li class="active">Data</li>
</ul>
```

いわゆるパンくずですね。

### Pagination

#### キャプチャ

<img width="253" alt="スクリーンショット 2015-12-13 22.46.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/077fafc1-9b4c-6e44-5418-2e93e2c94f5e.png">

#### ソースコード

```html
<ul class="pagination">
  <li class="disabled"><a href="javascript:void(0)">«</a></li>
  <li class="active"><a href="javascript:void(0)">1</a></li>
  <li><a href="javascript:void(0)">2</a></li>
  <li><a href="javascript:void(0)">3</a></li>
  <li><a href="javascript:void(0)">4</a></li>
  <li><a href="javascript:void(0)">5</a></li>
  <li><a href="javascript:void(0)">»</a></li>
</ul>
```

### Pager

#### キャプチャ

<img width="382" alt="スクリーンショット 2015-12-13 22.50.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/a072bab5-34f8-c25f-d978-4c35c3ef036d.png">

#### ソースコード

```html
<ul class="pager">
  <li class="previous disabled"><a href="javascript:void(0)">← Older</a></li>
  <li class="next"><a class="withripple" href="javascript:void(0)">Newer →</a></li>
</ul>
```

### Progress bars

#### キャプチャ

<img width="490" alt="スクリーンショット 2015-12-13 22.56.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/81308/7cb328de-96b8-254f-594f-842292e0d8c4.png">

#### ソースコード

```html
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>
```

# 終わりに

Material Design for Bootstrapについて、導入方法と各要素について書きました。
これから導入を考えている方は参考にしていただければと思います。