CDNでお手軽にBootstrap 4 を使用する方法

公式CDN

Bootstrap4の公式CDNはこちら。

ファイル名にminとついていますが、これは圧縮版だからです。
空白（インデント）や改行が除去されファイルサイズの軽量化が行われています。

minが付いていない通常版を入手したい場合は公式サイトのDownloadから落とせます。
実際の記述がどうなっているか確認したい場合や、Bootstrapのカスタマイズをする時などは通常版を見ることになりますね。

CDNで読み込む場合、通常版を使うメリットはないので min の方を使っておけばOKです。

2020年7月27日 Update

最近Bootstrap5のアルファ版が公開されたので、そちらの利用方法は別記事でまとめています。

CDNでお手軽に Bootstrap 5 α版を使用する方法

世界最大級のオンライン学習『Udemy』でBootstrap4を効率よく学ぶ

ファイルの説明

CSS

bootstrap.css（bootstrap.min.css）

ブートストラップの本体です。
これの読み込みが最低限必要なファイルです。
グリッドレイアウトやボタンデザインなどを使うだけの場合はこれだけでOKです。

JavaScript

bootstrap.js（bootstrap.min.js）

JavaScriptを使った機能（ドロップダウンメニューやカルーセルなど）を使用したい場合は、これを読み込みます。

Popper.jsとjQuery

bootstrap.jsは内部でPopper.js、jQueryという外部ライブラリを使用しているため、bootstrap.jsを使用する場合、これらも読み込む必要があります。

読み込む順番は、

jQuery
Popper.js
Bootstrap.js

となっています。

JavaScript Bundle

bootstrap.bundle.js（bootstrap.bundle.min.js）

bootstrap.jsにPopper.jsが同梱されたものです。
別々に読み込んでもいいのですが、読み込みが1回少なくなるのでバンドル版の方を使うのがいいと思います。
jQueryはバンドルされていないので、別に読み込む必要があります。

使用できるjQueryは？

jQueryはスリム版が使われていますが、フルバージョンもサポートされています。

対応しているバージョン

Bootstrap 4.2.1 のpackage.jsonで確認すると、

"peerDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.14.6"
}

となっているため、jQuery1.9.1以上なら動作すると思われます。（ドロップダウンメニューで確認済み）
（popper.jsのバージョンは1.14.6以上）

"devDependencies"は"jquery": "^3.3.1"（3.3.1以上）となっているので、使える環境ならば3.3.1以上を使用したほうが良いでしょう。（セキュリティ的にも）

4.5では必須バージョンに変更があります

この記事を執筆した当時はBootstrap4.2.1だったのですが、2020年7月27日現在の最新バージョンは4.5です。

Bootstrap4.5では上記の必要バージョンに変更があります。
Popper.jsの必須バージョンは 1.16.0以上。
jQueryはpeerDependenciesのバージョンに変更はありませんが、devDependenciesは3.5.1以上となっています。

WordPressのオリジナルテーマ作成などでBootstrapを使用する場合、WordPressはVer5.0.3（2019/02/07時点の最新）であっても同梱されているjQueryが1.12.4（1.x系の最終版）です。
他のプラグインとの兼ね合いを考えると1.12.4をそのまま使うのが無難です。
参考までに公式、人気テーマを見てみると、TwentySeventeenやJIN、CocoonはjQuery1.12.4、SANGOのみjQuery2.2.4を使用していました。

サンプルコード

スケルトンとして使用できる最低限のサンプルコードです。
赤字がBootstrap本体の読み込みで必須。
青字がJavaScriptの機能を使わないのであれば削除可能の部分です。

コード

<!DOCTYPE html>
<html lang="ja">
<head>
<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.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<title>Bootstrap4 表示サンプル</title>
</head>

<body>


<p>Bootstrap表示テスト</p>

<!-- JavaScriptを使ったドロップダウンメニュー -->
<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">ドロップダウン</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="#">アイテムA</a>
		<a class="dropdown-item" href="#">アイテムB</a>
	</div>
</div>


<!-- JavaScriptを使用する場合 -->
<!-- jQuery、Popper.js、Bootstrap.jsの順番で読み込みます（下記はbundle版を使用） -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>

</body>
</html>

サンプルコードはjQuery3.5.1（スリム版）を使用しています。
jQuery1.12.4を使用する場合は、こちらに置き換えます。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

参考
Bootstrap公式CDNBootstrapCDN

参考
jQuery公式CDNjQuery CDN

世界最大級のオンライン学習『Udemy』でBootstrap4を効率よく学ぶ