Bootstrapとは？ 使い方
概要
CSSフレームワークの１つ。
htmlから参照・利用する事で、速く簡単に綺麗なコントロール等を作成できる。
CSSフレームワーク
クラスが定義されているCSSライブラリ
ボタン、タブ、ドロップダウン等
JavaScriptを含むものもあり。
レスポンシブルデザイン対応。
メリット
Webサイト構築が速い
定義済みデザインが格好良い。
レスポンシブル対応
モックアップ(紙芝居)製作が簡単。打ち合わせに便利。
コーディングルールを統一できる
デメリット
最新ブラウザにしか対応していない(IE7,8×)
CSS、JSをカスタマイズする際に手間が掛かる事もある(既存の定義と競合する)。
SASS、LESS(CSSプリプロセッサ)のスキルが必要
運用時の注意
全てをフレームワークで作らない(使うところ、使わないを分ける)。
何がどう(どこに)影響するか？を知る事で差別化可能。
CSSフレームワークを使いやすい場面
自社サービス、自作サービス(対応ブラウザを絞れる)
打ち合わせ時等、モックアップの作成時
速さ重視の場合
設定
公式サイト
http://getbootstrap.com/
からライブラリファイルをダウンロードして直接参照
CDN(インターネット経由で参照)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" >
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" >
<head>
(1)CSSファイルを直接参照orCDN
「jQuery-UI 適用方法(概要)」参照
(2)IE8以下で動作させる為の設定
<!–[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]–>
</head>
<body>
(3)JavaScriptファイルの参照
※JavaScriptを利用するBootstrapコントロールの動作の為
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
(4)Boostrap利用コード
</body>
