はじめに～Bootstrap4移行ガイド

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

クイックスタート（Quick start）v4.5.3時点

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

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

CSS v4.5.3時点

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JS v4.5.3時点

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

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

バンドル版（Bundle）

バンドル版には、必要なすべてのものが1つのスクリプトに組み込まれている。bootstrap.bundle.js と bootstrap.bundle.min.js にはPopperが組み込まれているが、jQueryは組み込まれていない。Bootstrapの内容の詳細ついては、コンテンツの項目に記載。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

分離版（Separate）

スクリプトソリューションを別々に使用する場合は、Popper.jsを最初に配置し、次にJavaScriptプラグインを配置する必要がある。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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/）

コンポーネント（Components）

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

JavaScriptの設定を必要とするコンポーネントを表示

アラート、モーダル、トーストを閉じるボタン
ボタンによるON/OFF切替とチェックボックス/ラジオ機能
カルーセルのすべてのスライド動作、コントロール、インジケータ
折り畳みのコンテンツの表示切替
ドロップダウンの表示と配置（Popper.jsも必要）
モーダル動作の表示、配置、スクロール
折り畳みプラグインを拡張してナビゲーションバーでレスポンシブ動作を実装
表示して閉じるためのトースト
ツールチップとポップオーバーの表示と配置（Popper.jsも必要）
スクロールスパイのスクロール動作とナビゲーション更新

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.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
	</head>
	<body>
		<h1>こんにちは!</h1>
		...
		
		<!-- オプションのJavaScript：2つのうちどちらかを選択すること！ -->
		
		<!-- オプション1：jQueryとBootstrapバンドル版（Popperを含む） -->
		<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

		<!-- オプション2：jQuery、Popper.js、Bootstrap JS
		<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
		-->
	</body>
</html>

基本のテンプレート（Starter template）v4.5.3時点

最新のデザインと開発標準でページを設定する。つまり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.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.3時点でjQuery1.9.1以上に対応）
popper.min.js（Popper.js）はツールチップやポップオーバーで使用する位置決め用のサードパーティのライブラリファイル（v4.5.3時点でPopper.js1.16.1に対応）

【変更履歴】

【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
【v4.3.0】
- Popper.jsのバージョン：1.14.6⇒1.14.7
【v4.4.0】
- jQueryのバージョン：3.3.1⇒3.4.1
- Popper.jsのバージョン：1.14.7⇒1.16.0、Popper.jsのCDNの提供元：cdnjs ⇒ jsDelivr
【v4.5.0】
- jQueryのバージョン：3.4.1⇒3.5.1
【v4.5.1】
- Popper.jsのバージョン：1.16.0⇒1.16.1

【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 を使用する必要がある。

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

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