Bootstrapとは? 使い方

概要

CSSフレームワークの1つ。
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>