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

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

はじめに(Introduction)

BootstrapCDNとテンプレートスターターページで、レスポンシブなモバイルサイトを構築する世界で最も人気のあるフレームワークであるBootstrapを使い始める。

クイックスタート(Quick start)v4.2.1時点

手っ取り早くBootstrapを追加するためには、StackPathが無料で提供するBootstrapCDNを使用。パッケージマネージャを使用したり、ソースファイルをダウンロードする必要がある場合はダウンロードページから入手。

CSSを読み込むためには、 <head> の中の他のすべてのスタイルシートの前に、Bootstrapのスタイルシート <link> をコピー&ペースト。

CSS v4.2.1時点

コピー<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JS v4.2.1時点

多くのコンポーネントでは、JavaScriptを使用して機能させる必要がある。具体的には、jQueryPopper.js、独自のJavaScriptプラグインが必要。以下の <script> をページの終わり近くにある </body> タグの直前に置いて有効にする。最初にjQueryが来て、Popper.js、それからJavaScriptのプラグインが来なければならない。

以下ではjQueryのスリム版(ajaxとエフェクトモジュールを除外したバージョン)を使用しているが、フルバージョン版もサポートしている。

コピー<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

※コードにはCDNからのクロスサイトスクリプティング(XSS)を防ぐため integrity 属性と crossorigin 属性を追加する。
参考:[Chrome 45+][Firefox 43+][Opera 32+] CDNからのXSSを防ぐ(Qiita)

【変更履歴】

  • 【v4.1.0】BootstrapCDNの提供元:MaxCDN(https://maxcdn.bootstrapcdn.com/)⇒StackPath(https://stackpath.bootstrapcdn.com/)

jQuery、独自JavaScript、Popper.jsが明示的に必要なコンポーネントが不思議に思うなら、以下の「コンポーネントを表示」リンクをクリック。一般的なページ構造について不明な点がある場合は、サンプルのページテンプレートを参照すること。

bootstrap.bundle.jsbootstrap.bundle.min.js にはPopperが含まれているが、jQueryは含まれていない。Bootstrapに含まれているものの詳細については、ファイルの内容の項目を参照すること。

JavaScriptの設定を必要とするコンポーネントを表示
  • アラートを閉じるボタン
  • ボタンによるON/OFF切替とチェックボックス/ラジオ機能
  • カルーセルのすべてのスライド動作、コントロール、インジケータ
  • 折り畳みのコンテンツの表示切替
  • ドロップダウンの表示と配置(Popper.jsも必要)
  • モーダル動作の表示、配置、スクロール
  • 折り畳みプラグインを拡張してナビゲーションバーでレスポンシブ動作を実装
  • ツールチップとポップオーバーの表示と配置(Popper.jsも必要)
  • スクロールスパイのスクロール動作とナビゲーション更新
BootstrapCDNによる設定例(「基本のテンプレート」の場合)
コピー<!doctype html>
<html lang="ja">
	<head>
		<title>Bootstrap基本テンプレート</title>
	<!-- 必要なメタタグ -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
	</head>
	<body>
		<h1>こんにちは!</h1>
		...
		
	<!-- オプションのJavaScript -->
	<!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
	</body>
</html>

 

基本のテンプレート(Starter template)v4.2.1時点

ページに最新のデザインと開発基準が設定されていることを確認するように。これは、HTML5のdoctypeを使用し、適切なレスポンシブ動作のためにviewportメタタグが組み込まれていることを意味する。ページは次のようになる:

Bootstrap3.xの設定例 赤背景が変更箇所
<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>Bootstrap基本テンプレート</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<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>
Bootstrap4.xの設定例 緑背景が変更箇所
コピー<!doctype html>
<html lang="ja">
	<head>
		<title>Bootstrap基本テンプレート</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link href="css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<h1>こんにちは!</h1>
		...
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

【設定】

  • 適切なレンダリングとタッチズームを実現するため
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    を入れる(shrink-to-fit=no はiOS9.0のSafariで initial-scale=1 が適用されないのを回避するために設定)
  • jquery-3.x.x.slim.min.js(jQuery)はBootstrapのJavaScriptプラグインを動かすためのJSライブラリファイル(v4.2.1時点でjQuery1.9.1以上に対応)
  • popper.min.js(Popper.js)はツールチップやポップオーバーで使用する位置決め用のサードパーティのライブラリファイル(v4.2.1時点でPopper.js1.14.6に対応)

【変更履歴】

  • 【v4.1.0】jQueryのバージョン:3.2.1⇒3.3.1

    Popper.jsのバージョン:1.12.9⇒1.14.0

  • 【v4.1.1】Popper.jsのバージョン:1.14.0⇒1.14.3
  • 【v4.2.1】Popper.jsのバージョン:1.14.3⇒1.14.6

【Bootstrap3.xとの変更箇所】

  • viewportメタタグに shrink-to-fit=no を追加
  • IEの最新のレンダリングを適用するためのメタタグは不要に
  • popper.min.js の設定を追加
  • Internet Explorer8以下でHTML5のタグを擬似的に認識させるためのJSファイル html5shiv.js と、Internet Explorer8以下でレスポンシブに対応させるためのJSファイル respond.min.js の設定は不要に
  • doctypeの宣言が小文字に(gzip圧縮が少し改善されるらしい)

ページ全体の要件に必要なのはこれだけだが、サイトのコンテンツおよびコンポーネントのレイアウトを開始については、レイアウトの概要または実例に記載。

 

重要なグローバルスタイル(Important globals)

Bootstrapは、重要なグローバルスタイルと設定を使用しているので、使用時に注意する必要がある。これらは全てほとんどの場合でクロスブラウザスタイルの正規化に合わせられている。

HTML5のdoctypeを使用(HTML5 doctype)

Bootstrapでは、HTML5のdoctypeを使用する必要がある。それがなければ、若干変わった不完全なスタイルが表示されるが、任意の大問題が発生することはない。

<!doctype html>
<html lang="ja">
	...
</html>

※英語のサイトの場合は lang="en"、日本語のサイトの場合は lang="ja" となる。

レスポンシブ・メタタグ(Responsive meta tag)

Bootstrapは、モバイルファーストで開発しており、最初にモバイルデバイス用のコードを最適化して、次にCSSメディアクエリを使用して必要に応じてコンポーネントを拡大する戦略をとっている。すべてのデバイスで適切なレンダリングとズームタッチを確実にするには、<head>レスポンシブ viewport meta タグを追加する。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

基本のテンプレートでこの動作の例を見ることが可能。

ボックスサイズ(Box-sizing)

CSSでより簡単なサイジングを行うために、グローバル box-sizing の値を content-box から border-box に切り替える。これにより padding が要素の最終的な計算幅に影響することはないが、GoogleマップやGoogleカスタム検索エンジンなどのサードパーティ製のソフトウェアで問題が発動する可能性がある。

ごくまれに、それを再定義する必要があり、その場合には次のようなものを使用:

CSS.selector-for-some-widget {
	box-sizing: content-box;
}

上のコードでは、::before::after 経由で生成されたコンテンツを含む入れ子になった要素は、全て .selector-for-some-widget に対して指定された box-sizing を継承する。

CSS Tricksでのボックスモデルおよびサイジングの詳細については、こちらに記載。

Reboot

クロスブラウザのレンダリングを改善するため、Rebootを使用してブラウザやデバイス間の矛盾を修正し、一般的なHTML要素に若干注意を払ってリセットしている。

 

コミュニティ(Community)

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

  • @getbootstrapのTwitterをフォローする
  • Bootstrap公式ブログを購読する
  • 公式のSlackルームに参加する
  • irc.freenode.net サーバーの ##bootstrap チャネルにあるIRCのBootstrappers仲間とチャットする
  • 実装のヘルプはStack Overflow(タグ:bootstrap-4)にある
  • 開発者は、npmなどの配信メカニズム経由で配布するときには、検出の可能性を最大限に高めるためにBootstrapの機能を変更または追加するパッケージにキーワード bootstrap を使用する必要がある

BootstrapのGitHub問題を提起したり、プルリクエストを送信して、Bootstrapの開発に関わることも可能。Bootstrapがどのように開発されているかについては、貢献へのガイドライン(英語)を読むこと。