Bootstrapをはじめる。対応しているjQueryのバージョンなど。


スポンサーリンク

Bootstrapを使うための準備をしてみます。
必要なファイルなどをダウンロードしましょう。

Bootstrap

まずは、以下のサイトの「Download」をクリックして、Bootstrapを手に入れます。
http://getbootstrap.com/

CSSにはbootstrap.min.cssとか、bootstrap.css、bootstrap-theme.cssなどがありますが、
~min.~とついているものは、minがついていないものの空白や改行を詰めてファイルサイズを小さくしたものです。

bootstrap-theme.cssは、ボタンなどをフラットデザインにしたくないときに使います。

ダウンロードしたjsフォルダは基本的にインクルードするようにしてください。


jQuery

http://jquery.com/download/
Bootstrap3ではjQueryを必要とします。
jQueryにはバージョン1.x系と2.x系がありますが、Bootstrap3で使うのは、バージョン1.x系で、1.9以降のものです。


Respond.js

https://github.com/scottjehl/Respond
Respond.jsというライブラリは、IE8でもレスポンシブWebデザインを採用するためのライブラリです。
IE8にはメディアクエリ機能がないため、それを補完するためにRespond.jsを使います。


html5shiv

https://code.google.com/p/html5shiv/
IE8以前をサポートして、かつHTML5でソースを表示したい場合は、html5shivを使います。



CDNを使う場合

・Bootstrap

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

・Respond.js

<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>

http://cdnjs.com/libraries/respond.js/

・jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

・html5shiv

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

http://snipplr.com/view/50498/html5-shiv-on-google-cdn/


テンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
  <![endif]-->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>


</body>
</html>


<参考文献>
UIまで手の回らないプログラマのためのBootstrap 3実用ガイド

この本は本当に素晴らしい本です。
今のところ、Bootstrap入門の決定版で、日本語書籍ではコレ以外はありえないと思う。