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

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

はじめに(Introduction)

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

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

迅速にBootstrapを追加するためには、無料のオープンソースCDNであるjsDelivrを使用すること。パッケージマネージャを使用したり、ソースファイルをダウンロードする必要がある場合はダウンロードページから入手。

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

CSS v4.6.2時点

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS v4.6.2時点

多くのコンポーネントでは、機能させるのにJavaScriptを使用する必要がある。具体的には、jQueryPopper、BootstrapのJavaScriptプラグインが必要。以下ではjQueryのスリム版(ajaxとエフェクトモジュールを除外したバージョン)を使用しているが、フルバージョン版もサポートしている。

次の <script> のいずれかをページの最後の方にある </body> タグの直前に置いて有効にする。最初にjQueryを配置し、次にPopper、次にJavaScriptのプラグインを配置する必要がある。

バンドル版(Bundle)

2つのバンドル版のいずれかにすべてのBootstrapJavaScriptプラグインと依存関係が組み込まれている。bootstrap.bundle.jsbootstrap.bundle.min.js の両方に、ツールチップとポップオーバー用のPopperが組み込まれているが、jQueryは組み込まれていない。最初にjQueryを配置し、次にBootstrapのJavaScriptバンドル版を配置する。Bootstrapの内容の詳細ついては、コンテンツの項目に記載。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

分離版(Separate)

スクリプトソリューションを別々に使用する場合は、Popperを最初に配置し(ツールチップやポップオーバーを使用している場合)、次にJavaScriptプラグインを配置する必要がある。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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/)
  • 【v4.5.3】
    • CDNの提供元:StackPath(https://stackpath.bootstrapcdn.com/)⇒jsDelivr(https://www.jsdelivr.com/)
  • 【v4.6.1】
    • jQueryのCDNの提供元もBootstrapのCDNに合わせて、jQuery(https://jquery.com/) ⇒ jsDelivr(https://www.jsdelivr.com/)に変更

コンポーネント(Components)

どのコンポーネントが明示的にjQuery、BootstrapのJavaScript、Popperを必要とするのか知りたいなら、以下の「コンポーネントを表示」リンクをクリックして確認。一般的なページ構造については、設定例のテンプレートに記載。

JavaScriptの設定を必要とするコンポーネントを表示
  • アラート、モーダル、トーストを閉じるボタン
  • ボタンによるON/OFF切替とチェックボックス/ラジオ機能
  • カルーセルのすべてのスライド動作、コントロール、インジケータ
  • 折り畳みのコンテンツの表示切替
  • ドロップダウンの表示と配置(Popperも必要)
  • モーダル動作の表示、配置、スクロール
  • 折り畳みプラグインを拡張してナビゲーションバーでレスポンシブ動作を実装
  • スクロールスパイのスクロール動作とナビゲーション更新
  • トーストの表示と非表示
  • ツールチップとポップオーバーの表示と配置(Popperも必要)
CDNによる設定例(「基本のテンプレート」の場合)
<!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://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
	</head>
	<body>
		<h1>こんにちは!</h1>
		...
		
		<!-- オプションのJavaScript:2つのうちどちらかを選択すること! -->
		
		<!-- オプション1:jQueryとBootstrapバンドル版(Popperを含む) -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

		<!-- オプション2:jQuery、Popper、Bootstrap JS -->
		<!--
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
		-->
	</body>
</html>

 

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

最新のデザインと開発標準でページを設定する。つまり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://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 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.6.2時点でjQuery1.9.1以上に対応)
  • popper.min.js(Popper)はツールチップやポップオーバーで使用する位置決め用のサードパーティのライブラリファイル(v4.6.2時点でPopper.js1.16.1に対応)

【変更履歴】

  • 【v4.0.0】
    • viewportメタタグに shrink-to-fit=no を追加
    • IEの最新のレンダリングを適用するためのメタタグは不要に
    • popper.min.js の設定を追加
    • Internet Explorer8以下でHTML5のタグを擬似的に認識させるためのJSファイル html5shiv.js と、Internet Explorer8以下でレスポンシブに対応させるためのJSファイル respond.min.js の設定は不要に
    • doctypeの宣言が小文字に(gzip圧縮が少し改善されるらしい)
  • 【v4.1.0】
    • jQueryのバージョン:3.2.1⇒3.3.1
    • Popperのバージョン:1.12.9⇒1.14.0
  • 【v4.1.1】
    • Popperのバージョン:1.14.0⇒1.14.3
  • 【v4.2.1】
    • Popperのバージョン:1.14.3⇒1.14.6
  • 【v4.3.0】
    • Popperのバージョン:1.14.6⇒1.14.7
  • 【v4.4.0】
    • jQueryのバージョン:3.3.1⇒3.4.1
    • Popperのバージョン:1.14.7⇒1.16.0、PopperのCDNの提供元:cdnjsjsDelivr
  • 【v4.5.0】
    • jQueryのバージョン:3.4.1⇒3.5.1
  • 【v4.5.1】
    • Popperのバージョン:1.16.0⇒1.16.1
  • 【v4.6.1】
    • jQueryのバージョン:3.5.1⇒3.6.0(CDNの提供元もBootstrapのCDNに合わせて、jQueryjsDelivr

ページ全体の要件に必要なのはこれだけだが、サイトのコンテンツやコンポーネントのレイアウトの設定方法は、レイアウトの概要実例に記載。

 

重要なグローバルスタイル(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の開発に関する最新情報を入手し、以下のツールを使用してコミュニティに連絡する。

  • Bootstrap公式ブログを購読する
  • 公式のSlackルームに参加する
  • irc.libera.chat サーバーの #bootstrap チャネルにあるIRCのBootstrappers仲間とチャットする
  • 実装のヘルプはStack Overflow(タグ:bootstrap-4)にある
  • 開発者は、最大の発見性を得るためにnpmや同様の配信メカニズムを経由して配布する場合、Bootstrapの機能を変更や追加するパッケージにキーワード bootstrap を使用する必要がある。

Twitterで@getbootstrapをフォローして、最新の噂話や素晴らしいミュージックビデオを入手することも可能。

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

 

CSPと組み込みSVG(CSPs and embedded SVGs)v4.6.0追加

いくつかのBootstrapコンポーネントには、CSSに埋め込まれたSVGが含まれており、ブラウザやデバイス間で一貫して簡単にコンポーネントのスタイルが設定可能。より厳密なCSP(コンテンツセキュリティポリシー)構成を持つ組織向けに、組み込みSVGのすべての事例(すべて background-image を経由して適用)を文書化したため、オプションがより徹底的に確認可能。

コミュニティでの会話に基づき、独自のコードベースでこれに対処するためにいくつかのオプションには、URLをローカルでホストされているアセットの置換、画像を削除してインライン画像を使用(すべてのコンポーネントでは不可能)、CSPの変更などがある。独自のセキュリティポリシーを注意深く確認し、必要に応じて最善の方法を決めることを推奨。