LoginSignup
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@59naga

bootstrap-material-designの導入方法

Last updated at Posted at 2015-06-28

ss.png

公式のNavbarを表示する方法です。

依存関係

.
└─┬ 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
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

<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から必要ファイルの一覧を取得する場合は

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は使用できませんでした

./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
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()を実行する。

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

まとめ

body要素内のコードは、公式のサンプルの右端あたりをマウスカーソルに合わせると出る「Source Code」をコピーしたものです。

動作するデモ

<!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>
3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?