Bootstrapを使用するための準備
Bootstrapを使用する方法はCDNを利用する方法とサイトからダウンロードして利用する2種類の方法があります。
どちらも共通で最低限cssとjavascriptの2種類の指定が必要になります。
ご自分の用途に合わせて選択してください。
CDNを利用する方法
CDNを利用し、アドレスを指定するだけで利用することが可能です。
※CDN（Content Delivery Network）は、サーバに置かれているデータを読み込むことで利用するのでネットの繋がっていないローカル作業では利用できないので注意してください。
下記リンクのBootstrap CDNサイトに掲載のアドレスを利用することでBootstrapを利用できます。
サイトに訪れると下記画像のようにトップ画面のすぐ下にアドレスが掲載されています。
※TOP画面掲載のアドレスは最新のバージョンになります。古いバージョンを利用したい場合は上部メニューlegacyのリンク先からアドレスを入手してください。
まずは、こちらに掲載されているComplete CSSの下にあるプルダウンを開くとhtmlの部分に簡単にコピペ出来るソースが掲載されていますのでそのソースを使用したいhtmlの<head></head>内に貼ります。
<head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </head>
続いて、Bootstrap CDNサイト内の先程のComplete CSSの下にあるComplete JavaScriptのプルダウンを開き先ほどと同様にhtmlの部分にあるソースをhtmlの</body>直前に貼ります。
※同時にBootstrapのjavascriptはjQueryがないと動作しないためjQueryもCDNを利用し読み込んでいます。
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body>
こちらで準備完了です。
※bootstrap.min.jsには、bootstrapで用意されているJavasciptが全て記載されています。
必要なものだけ記載する場合は書き換えが必要です。
htmlソースを全体的に書くと下記の様な形になります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrapの使い方</title> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body>
こちらでIE9未満に関してhtml5shiv.jsとrespond.jsを読み込む設定が追加されているのは、Bootstarap3でIE8以下に対応するのに必要なためです。IE8以下に対応しないで良い場合は必要ありません。IE8以下で対応していないhtml5とmediaqueryに対応させるためにそれぞれ読み込んでいます。
また、respond.jsをCDNの利用していないのはbootstrap.min.cssとクロスドメインになると公式であるため利用していません。CDNを利用する方法もありますが少し煩雑になるためこちらでは説明を控えます。英語も良くわからないので。。。
respond.jsをCDNでクロスドメインで利用する方法はこちら（英語）に掲載されているようです。
ちなみにhttp:又はhttps:を省略して//からリンクしていますが、こちらは//の前がhttp:でもhttps:でも自動的に判断してリンクしてくれる絶対パスになるそうです。今回憶えた豆知識です。
ダウンロードして利用する方法
下記のBootstrap本サイトのリンクからデータをまずはダウンロード！
下記画像のようにBootstrap部分からダウンロードしてください。
※その隣のSource codeはcssを書き出す前のLESSファイルもダウンロードでき、その隣はLESSをSassファイルに書き換えたファイルがダウンロードできます。基のファイルから調整したい方など必要に応じてダウンロードしてください。
ダウンロードしたファイル（記事作成時の最新版はbootstrap-3.3.4-dist.zip）を解凍すると下記のようなファイル構成になります。
bootstrap/
├── css/
│ ├── bootstrap.css（圧縮なしのCSS）
│ ├── bootstrap.css.map（ソースマップファイル）
│ ├── bootstrap.min.css（圧縮されたCSS）
│ ├── bootstrap-theme.css（グラデーションなどを使用したオプションのCSS）
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js（圧縮なしのjavascript）
│ └── bootstrap.min.js（圧縮されたjavascript）
└── fonts/（bootstrapで用意されているGlyphiconsアイコンを使用するためのファイル）
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
上記の中から、必要最低限使用するのはbootstrap.min.cssとbootstrap.min.jsになります。minはファイル圧縮（Minify）の略なので圧縮なしのファイルでも構いませんが、データを直接触る予定がない場合は少しでも軽いデータを利用する方が良いかと思います。
Bootstrap3ではフラットデザインが採用されていますが、ボタンなどにグラデーションを加えているbootstrap-theme.cssもオプションとして用意されています。参考に公式のテンプレートソースを基に反映したページを用意したので違いを見比べてみてください。
ご自分で利用するhtmlファイルなどに読み込めば準備完了です。
公式サイトのBasic templateを参照にhtmlソースを全体的に書くと下記の様な形になります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrapの使い方</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body>
CDN利用する方法にも書きましたが、html5shiv.jsとrespond.jsはIE8以下に対応するためです。jqueryはbootstrapのjavascriptを利用するために必要になりまます。
もちろん上記もCDNを利用せずダウンロードして利用しても構いません。
ちなみに当サイトでは全てダウンロードデータを使用する形にしています。
※bootstrapのバージョンによってjQueryの対応バージョンは違うので注意してください。
記事作成時のbootstrap-3.3.4ではjQuery1.9.1以上が必要になります。
上記で利用準備は出来たので、試しに公式のJumbotronというテンプレートのソースを基に組み込んでみた例を置いておきます。