メインコンテンツへスキップ

導入（Getting started）

Bootstrap3の使い方をBootstrap2.xからの変更箇所を交えて解説しています。

ダウンロード（Download）

Bootstrap3（最新版はv3.4.1）には、スキルレベルと使用事例が異なるそれぞれ魅力的な、素早く始めるための簡単な方法がいくつか存在。自分の特定のニーズに合ったものを見て読むこと。

Bootstrap

コンパイル済みとその軽量版のCSS、JavaScript、フォント。ドキュメントやオリジナルのソースファイルは入っていない。

Bootstrapのダウンロード

※ダウンロードファイルの内容はこちら

ソースコード

ソースLess、JavaScript、フォントファイル、ドキュメントなど。 Lessコンパイラといくつかのセットアップが必要。

ソースのダウンロード

※ダウンロードファイルの内容はこちら

Sass

Rails、Compass、Sassのみのプロジェクトに簡単に組み入れ可能なLessからSassへ移植されたBootstrap3

Sassのダウンロード

CDN(Content Delivery Network)で使用する場合（Bootstrap CDN）v3.4.1時点

MaxCDNで、Bootstrap3のCSSとJavaScript用のCDNサポートを快く提供。これらのBootstrap3のCDNリンクが使用可能。

<!-- 最新のコンパイルおよび縮小されたCSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- オプションのテーマ -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新のコンパイルおよび縮小されたJavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

設定例（「基本のテンプレート」の場合）

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Bootstrap3基本テンプレート</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<h1>こんにちは!</h1>
		...
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	</body>
</html>

【基本のテンプレートとの変更箇所】

  • <link href="css/bootstrap.min.css" rel="stylesheet">
    の部分を、
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    に変更
  • <script src="js/bootstrap.min.js"></script>
    の部分を、
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    に変更

【注意】

  • 従前のバージョン（2.0.4以降）についてはBootstrap CDNを参照

【変更履歴】

  • 【3.1.1】CDNの提供元がNetDNA（https://netdna.bootstrapcdn.com/）からMaxCDN（https://maxcdn.bootstrapcdn.com/）に変更
  • 【3.3.6】CDNからのクロスサイトスクリプティング(XSS)を防ぐため integrity属性とcrossorigin属性を追加
    ※参考：[Chrome 45+][Firefox 43+][Opera 32+] CDNからのXSSを防ぐ（Qiita）
  • 【3.4.1】CDNの提供元がMaxCDN（https://maxcdn.bootstrapcdn.com/）からStackPath（https://stackpath.bootstrapcdn.com/）に変更

Bowerでのインストール（Install with Bower）

Bowerを使用して、Bootstrap3のLess、CSS、JavaScript、フォントをインストールして管理することも可能：
※v3.4.0以降は入手不可。

$ bower install bootstrap

npmでのインストール（Install with npm）

npmを使ってBootstrap3をインストールすることも可能：

$ npm install bootstrap@3

require('bootstrap')は、Bootstrap3のすべてのjQueryプラグインをjQueryオブジェクトに読み込む。bootstrapモジュール自体は何もエクスポートしない。パッケージの最上位ディレクトリの下に/js/*.jsファイルを読み込むことで、Bootstrap3のjQueryプラグインを個別に手動で読込可能。

Bootstrap3のpackage.jsonには、次のキーの下にいくつかの追加のメタデータが組み込まれている：

  • less - Bootstrap3のメインLessソースファイルへのパス
  • style - 既定の設定（カスタマイズなし）を使用したコンパイル済みのBootstrap3の非軽量版CSSへのパス

Composerでのインストール（Install with Composer）

また、Composerを使用して、Bootstrap3のLess、CSS、JavaScript、フォントをインストールして管理することも可能：

$ composer require twbs/bootstrap

Less/SassにはAutoprefixerが必要（Autoprefixer required for Less/Sass）

Bootstrap3は、CSSのベンダープレフィックスを処理するためにAutoprefixerを使用。Less/SassソースからBootstrap3をコンパイルし、Gruntfileを使用しない場合は、Autoprefixerを自分で構築プロセスに組み込む必要がある。コンパイル済みのBootstrap3を使用している場合、またはGruntfileを使用している場合は、Autoprefixerが既にGruntfileに統合されているため、心配する必要はない。

入っているもの（What's included）

Bootstrap3は、2つの形式でダウンロード可能。その中には、以下のディレクトリとファイルがあり、共通のリソースを論理的にグループ化し、コンパイル済みと軽量版の両方を提供。

コンパイル済みのファイル（Precompiled Bootstrap）

ダウンロードしたら、圧縮されたフォルダを解凍して、（コンパイルされた）Bootstrap3の構造を見ると、以下のように表示：

bootstrap/
├── css/
│	 ├── bootstrap.css
│	 ├── bootstrap.css.map
│	 ├── bootstrap.min.css
│	 ├── bootstrap.min.css.map
│	 ├── bootstrap-theme.css
│	 ├── bootstrap-theme.css.map
│	 ├── bootstrap-theme.min.css
│	 └── bootstrap-theme.min.css.map
├── js/
│	 ├── bootstrap.js
│	 └── bootstrap.min.js
└── fonts/
		├── glyphicons-halflings-regular.eot
		├── glyphicons-halflings-regular.svg
		├── glyphicons-halflings-regular.ttf
		├── glyphicons-halflings-regular.woff
		└── glyphicons-halflings-regular.woff2

ほぼすべてのWebプロジェクトでの迅速な差し込み式で使用するコンパイル済みのファイルであるBootstrap3の最も基本的な形式。コンパイルされたCSSとJS（bootstrap.*）、コンパイルされた軽量版のCSSとJS（bootstrap.min.*）を提供。CSSソースマップ（bootstrap.*.map）は、特定のブラウザの開発者ツールで使用可能。オプションのBootstrap3テーマと、同じくグリフアイコンのフォントも入っている。

ソースコード（Bootstrap source code）

Bootstrap3のソースコードのダウンロードには、コンパイル済みのCSS、JavaScript、フォントファイル一式と、ソースのLessとJavaScript、ドキュメントが入っている。具体的には、以下のとおり：

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│	 ├── css/
│	 ├── js/
│	 └── fonts/
└── docs/
		└── examples/

less/, js/, fonts/は、それぞれCSS、JS、アイコンフォントのソースコードが入っており、dist/フォルダには、上記の「コンパイル済みのファイル」に記載されているすべてのファイルが入っている。docs/フォルダには、ドキュメント（マニュアル）のソースコード、examples/にはBootstrap3の使用例が入っている。それ以外にも他にパッケージ、ライセンス情報、開発用のサポートを提供するファイルが入っている。

※いずれにしろ、ダウンロードしたファイルを使用する場合は基本的に、

  • dist/css/bootstrap.min.css
  • dist/js/bootstrap.min.js
  • dist/fonts/（Glyphiconを使用する場合）
を自分のサイトにアップロードする。

カスタマイズしてダウンロードする場合

Bootstrap3公式サイトでcssファイルとjsファイルのカスタマイズの設定をしてダウンロードしたファイルを解凍し、

  • bootstrap/css/bootstrap.min.css
  • bootstrap/js/bootstrap.min.js
  • bootstrap/fonts/（Glyphiconを使用する場合）
を適宜アップロードする。

CSSとJavaScriptのコンパイル（Compiling CSS and JavaScript）

Bootstrap3はGruntを構築システムに使用し、フレームワークを操作する便利なメソッドを使用。コードのコンパイル、テストの実行方法など。

Gruntのインストール（Installing Grunt）

Gruntをインストールするには、まずnode.js（npmを含む）をダウンロードしてインストールする必要がある。npmはパッケージ化されたnodeのモジュールの略で、node.jsを通して開発の依存関係を管理する方法。

次に、コマンドラインから：

  1. npm install -g grunt-cliを使用してgrunt-cliを全体にインストール。
  2. ルートの/bootstrap/ディレクトリに移動し、npm installを実行。npmはpackage.jsonファイルを調べ、そこにリストされている必要なローカル依存関係を自動的にインストール。

完了すると、コマンドラインから提供されるさまざまなGruntコマンドを実行することが可能。

使用可能なGruntコマンド（Available Grunt commands）

grunt dist（CSSとJavaScriptをコンパイル)

コンパイル済みのCSSファイルとJavaScriptファイルを使用して/dist/ディレクトリを再生成する。Bootstrap3ユーザが通常望むコマンド。

grunt watch（監視）

Lessソースファイルを監視し、変更を保存するたびにCSSを自動的に再コンパイル。

grunt test（テストを実行）

Karmaを使って実際のブラウザでJSHintとQUnitのテストを実行。

grunt docs（ドキュメントファイルの構築とテスト）

bundle exec jekyll serveを使用してドキュメントをローカルで実行する際に使用されるCSS、JavaScript、その他の一式を構築してテスト。

grunt（完全にすべてを構築し、テストを実行）

CSSとJavaScriptをコンパイルおよび縮小し、ドキュメントWebサイトを構築し、ドキュメントに対してHTML5のバリデータを実行し、カスタマイズされたファイル一式を再生成。Jekyllが必要。通常、Bootstrap3自体をハッキングする場合にのみ必要。

トラブルシューティング（Troubleshooting）

依存関係のインストールやGruntコマンドの実行に問題が発生した場合は、最初にnpmで生成された/node_modules/ディレクトリを削除して、npm installを再実行すること。

【Bootstrap2.xとの変更箇所】

  • LESS/JSファイルのコンパイルツールがMakefileからNode.jsベースのGruntに変更

基本のテンプレート v3.4.1時点

この基本的なHTMLテンプレートから始めたり、こちらの実例を変更して使用する。テンプレートとサンプルをカスタマイズし、ニーズに合わせてカスタマイズ。

Bootstrap2.3.2の設定例 赤背景が変更箇所

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap3基本テンプレート</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	</head>
	<body>
	 <h1>こんにちは!</h1>
		...
		<script src="http://code.jquery.com/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

Bootstrap3.xの設定例 緑背景が変更箇所

<!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>Bootstrap3基本テンプレート</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<h1>こんにちは!</h1>
		...
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

【設定】

  • HTML5のdoctypeを使用する
  • 文字コードを設定するため、<meta charset="utf-8">を入れる
  • IEの最新のレンダリングが適用されるよう、<meta http-equiv="X-UA-Compatible" content="IE=edge">を入れる
  • 適切なレンダリングとタッチズームを実現するため、<meta name="viewport" content="width=device-width, initial-scale=1">を入れる
  • 以上3つのメタタグは<head>の最初に来なければならない
  • html5shiv.jsはInternet Explorer8以下でHTML5のタグを擬似的に認識させるためのJSファイル
  • respond.min.jsはInternet Explorer8以下でレスポンシブに対応させるためのJSファイル
  • jquery.js（jQuery）はBootstrapのJavaScriptプラグインを動かすためのJSライブラリファイル

【変更履歴】

  • 【3.0.1】上記外部ファイルはCDNで表記
  • 【3.1.0】respond.min.jsのバージョンが1.3.0から1.4.2に変更
  • 【3.2.0】html5shiv.jsのバージョンが3.7.0から3.7.2に変更
  • 【3.3.7】html5shiv.jsのバージョンが3.7.2から3.7.3に変更、jQuery3に対応

別途CSS/JSファイルを設置する

Bootstrap3のcssやjsだけでは対応しきれない場合は、Bootstrap3のファイルを編集せずに別途cssやjsを設定したCSS/JSファイルを設置する。

設定例（基本のテンプレートの場合）

<!DOCTYPE html>
<html>
	<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>Bootstrap3基本テンプレート</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet"><!-- 追加のCSSファイル -->
		...
	</head>
	<body>
		...
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/style.js"></script><!-- 追加のJSファイル -->
	</body>
</html>
  • CSSファイル：bootstrap.min.cssより後に設置
  • JSファイル：bootstrap.min.jsより後に設置

ツール（Tools）

Bootlint

Bootlintは公式のBootstrap3 HTML linterツール。これは、かなり"素"の方法でBootstrap3を使用しているWebページのいくつかの一般的なHTMLの間違いを自動的にチェック。素のBootstrap3のコンポーネント/ウィジェットは、DOMの一部が特定の構造に適合することを必要とする。Bootlintは、Bootstrap3コンポーネントのインスタンスが正しく構造化されたHTMLを持つかどうかをチェック。Bootstrap3のWeb開発ツールチェーンにBootlintを追加して、一般的な間違いでプロジェクトの開発を遅らさないようにする。

コミュニティ（Community）

Bootstrap3の開発について最新情報を入手し、次の参考資料を使用してコミュニティに連絡すること。

  • Bootstrap公式ブログを購読する
  • irc.freenode.net サーバーの##bootstrapチャネルにあるIRCのBootstrappers仲間とチャットする
  • Bootstrap3の使用については、twitter-bootstrap-3タグを使用してStack Overflowに問い合わせる
  • 開発者は、npmなどの配信メカニズム経由で配布するときには、検出の可能性を最大限に高めるためにBootstrap3の機能を変更または追加するパッケージにキーワード bootstrap を使用する必要がある
  • Bootstrap ExpoでBootstrapを使って構築している人々の感動的な実例を探すこと

最新の情報とすばらしいミュージックビデオについては、@getbootstrapのTwitterのフォローでも可。

レスポンシブの無効化（Disabling responsiveness）

Bootstrap3は自動的にページをさまざまな画面サイズに適応させる。この機能を無効にして、ページが非レスポンシブなBootstrap3のように機能するようにする方法は次のとおり。

ページの応答性を無効にする手順（Steps to disable page responsiveness）

  1. CSSドキュメントに記載されているビューポート<meta>タグは省略。
  2. 単一の幅、例えばwidth: 970px !important;のように各グリッド階層の.containerのwidthを再定義する。これをデフォルトのBootstrap3のCSSの後に入れること。オプションでメディアクエリやセレクタなどで!importantを避けることが可能。
  3. ナビゲーションバーを使用している場合、すべてのナビゲーションバーの折りたたみと展開の動作を削除。
  4. グリッドレイアウトでは、中/大クラスに加えて、または代わりに.col-xs-*クラスを使用する。極小デバイスグリッドはすべての解像度に対応。

IE8にはRespond.jsが必要（メディアクエリがまだ存在し処理が必要なため）。これにより、Bootstrap3の「モバイルサイト」の機能が無効になる。

※non-responsive.css（v3.4.1対応済）を使用すればレスポンシブの無効化が可能（ダウンロードはリンク先を右クリックして保存）。
※Bootstrap3用の非レスポンシブのテンプレート（実例より）

設定例（基本のテンプレートの場合）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Bootstrap3基本テンプレート</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/non-responsive.css" rel="stylesheet">
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		 <![endif]-->
	</head>
	<body>
		...
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

【基本のテンプレートとの変更箇所】

  • <meta name="viewport" content="width=device-width, initial-scale=1">を削除
  • <link href="css/bootstrap.min.css" rel="stylesheet">
    の下に、
    <link href="css/non-responsive.css" rel="stylesheet">
    を追加
  • ※respond.jsは残っているメディアクエリを処理する必要があるため残すこと

【設定】

【注意】

  • 表示領域がページ内容より狭いとき、固定された構成要素（例：固定ナビゲーションバー）は横スクロールできず隠れてしまう可能性あり

フラットデザインの無効化（Bootstrap theme）

ダウンロードファイルに同梱されているdist/css/bootstrap-theme.min.cssを使用すればフラットデザインではなくv2のようなデザインで使用可能。
デザインの見本（実例より）

設定例（基本のテンプレートの場合）

<!DOCTYPE html>
<html>
	<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>Bootstrap3基本テンプレート</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/bootstrap-theme.min.css" rel="stylesheet">
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		...
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

【基本のテンプレートとの変更箇所】

  • <link href="css/bootstrap.min.css" rel="stylesheet">
    の下に、
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    （CDNの場合は<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet" integrity="sha384-jzngWsPS6op3fgRCDTESqrEJwRKck+CILhJVO5VvaAZCq8JYf8HsR/HPpBOOPZfR" crossorigin="anonymous">）
    を追加