Boostrapの覚書

概要

CSSフレームワークの１つで、精錬されたデザインを簡単に利用できます。
以前は「Twitter Bootstrap」と呼ばれていました。
メニューやボタン、アンカーに対するCSSスタイルが用意されています。
デザインは以下のデモから確認できます。
デモ

公式サイト/ダウンロード


展開の流れ

（確認バージョン Currently v3.3.5）

  1. 公式サイト"http://getbootstrap.com/から、ファイルbootstrap-3.3.5-dist.zipをダウンロードする。
  2. bootstrap-3.3.5-dist.zipを解凍し、次のフォルダ3点、css,fonts,jsを確認する。
  3. 開発環境のcssファイルやjsファイルを置いてあるディレクトリに、フォルダ3点（css,fonts,js）をそのまま配置する。
    　例：cakephpならapp/webroot配下にそのままフォルダ3点を配置するだけ。
  4. bootstrap.min.css(bootstrap.cssでも良い)をインクルードする。
    　<link href="css/bootstrap.min.css" rel="stylesheet">
  5. jquery.jsのインクルードコードの下に、bootstrap.min.js(bootstrap.js)のインクルードコードを追加する。
    　<script src="js/jquery-1.11.1.min.js"></script>
    　<script src="js/bootstrap.min.js"></script>
  6. 以上で終わり。


2014年10月時点の対応状況

IE7,Firefox3.6以下はサポート外です。
またIE9以下はRespond.jsが必要になります。（CSS3はIE8以下で未対応のため）


基本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>Boostrapのサンプル1</title>

	    <link href="bootstrap-3.2.0-dist/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]-->

	    <script src="bootstrap-3.2.0-dist/js/jquery-1.11.1.min.js"></script>
	    <script src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>

	  </head>
	  <body>
	    <h1>Hello world!</h1>


	    <button type="button" class="btn btn-primary btn-lg">テストボタン</button>
	  </body>

	</html>
サンプル1


他の要素へのスタイル

他にもナビケーション、ラベル、リスト、テーブルなど多数のスタイルが用意されています。 詳しくは公式サイトのデモを参考にしてください。
公式のデモ