この記事では実際にBootstrapを導入して、使用できるところまでを追っていきます。
Bootstrapをはじめる
Bootstrapを始めるためには、jQueryとBootstrapの提供するJSファイルとCSSファイル、この3つを読み込む必要がある。
簡単に始める（CDNの利用）
CDNを利用すれば、わざわざダウンロードする必要もなく簡単。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
</body>
</html>
このコードはBootstrapのdocumentから引っ張ってきたもの。
ポイントとしては
- HTML5による記述
- Internet Explorerは最新版でのみ1
- viewportを使ってレスポンシブに対応
- box-sizingはborder-boxで指定
- Normalize.css実装済み
ダウンロードする
Bootstrapの公式ページから
ダウンロードは以下から
Bootstrap/getting-started/download
Bootstrap v4からはCSSでもLessでもなくSassで配布されている。
利用するにはGruntの環境が必要に。がんばりましょう。
2015/09/11 追記
v3ではLessが配布されていたのですが、v4からはSassに以降したということです。
CSSはすでにGruntでビルト済みのものがdistフォルダに入っています!!
パッケージマネージャーを使う
以下に対応。
- Bower
bower install bootstrap - npm
npm install bootstrap - Meteor
meteor add twbs:bootstrap - Composer
composer require twbs/bootstrap
カスタムビルド
Bootstrapの中でも使いたいものだけダウンロードすることができる。
v4ではまだ準備中っぽいのでまた今度更新します。
ちょっとしたカスタマイズ
以下の値は_variables.scssの42-62行目あたりを書き換えてGruntで再コンパイルすることで、カスタマイズが簡単にできる。
| variable | default | Description |
|---|---|---|
$spacer |
1rem | デフォルトのspacerの値 |
$enable-flex |
false | float, display:tableとdisplay:flexの切り替え2 |
$enable-rounded |
true | border-radiusを定義しておく |
$enable-shadows |
false | box-shadowを定義しておく |
$enable-gradients |
false | 背景グラデーションを定義しておく |
$enable-transitions |
true | transition効果を定義しておく |
$enable-hover-media-query |
false | タッチデバイスの時はhover要素を無効化にする3 |
カスタマイズオプションや、カスタマイズ性そのものは、v4で強化されたっぽいのでたくさん試していきたいな！