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

Bootstrap5のアルファ版が公開されたので、CDNで利用する方法を紹介です。

ちなみにBootstrap4のCDN利用は下記の記事の方を参照して下さい。

公式CDN

Bootstrap4のCDNと共に、下の方にスクロールするとBootstrap5アルファ版のCDNも書かれています。

Bootstrap 5 CDN

CSS
https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css

JavaScript
https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js

JavaScript Bundle
https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js

JavaScript ESM Build
https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.esm.min.js

CDNなのでファイル名に「min」と付いた圧縮版になっていますね。
空白（インデント）や改行が除去されファイルサイズの軽量化が行われています。

minが付いていない通常版（コンパイル前のソース一式）が欲しい場合は公式サイトのDownloadから落とせます。
Bootstrapのカスタマイズやスタイルの確認をしたい場合は通常版を入手しましょう。

CDNで使う場合、通常版を使うメリットは無いので、このまま気にせずminが付いた圧縮版を使えばOKです。

ファイルの説明

CSS

bootstrap.css（bootstrap.min.css）

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

JavaScript

bootstrap.js（bootstrap.min.js）

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

Popper.jsが必要

bootstrap.jsを動作させるにはPopper.jsという外部ライブラリも必要です。
使用できるバージョンは Popper 1.16.0 以上となっています。
読み込む順番は

Popper.js
bootstrap.js

となっています。

Popper.js と Bootstrap.js を読み込む

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

JavaScript Bundle

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

bootstrap.jsにpopper.jsが同梱されています。
別々にBootstrapとPopperを読み込むよりも、1回読み込みが少なくなるので通常はこのバンドル版を使うのがいいと思います。

同梱されているPopper.jsのバージョンは1.16.0でした。
任意のPopper.jsのバージョンを使いたいのならば別々に読むのがいいですね。
※Bootstrap5ではPopper 1.16.0 以上のバージョンが必要です。

JavaScript ESM Build

bootstrap.esm.js（bootstrap.esm.min.js）

ES ModuleとしてBootstrapを使いたい場合は、こちらのを読むことになります。

サンプルコード

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

index.html

<!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/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<title>Bootstrap 5 表示サンプル</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を使用する場合 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js" integrity="sha384-DBjhmceckmzwrnMMrjI7BvG2FmRuxQVaTfFYHgfnrdfqMhxKt445b7j3KBQLolRl" crossorigin="anonymous"></script>

</body>
</html>

対応ブラウザ

Chrome 60 以上（2017年）
Firefox 60 以上（2018年）
Edge 16.16299 以上（2017年）
iOS 10 以上（2016年）
Safari 10 以上（2016年）
Android 6 以上（2015年）

Internet Explorer（11）、及びExplorer Mobileはサポートされていません。

Bootstrap5で変わったこと

詳しいことは公式Blogの方を参照してもらうとして、要点だけを抜粋すると…

jQuery不要。バニラJavaScript（素のJavaScript）になりました。
※v5でjQueryは今まで通り使っても問題ないようです。v6で使用不可になるみたい。
Internet Explorer をサポートから外しました。
結果、CSSカスタムプロパティが使用できるようになりました。
Buttonプラグインの大部分を削除。
カラーパレット拡張。
フォームコンポーネント一新。
グリッドシステム強化。
ドキュメントの静的サイト生成がJekyllからHugoに変更。
1,000以上のアイコンが実装。
ESMバージョン(ES Module)の導入により、モジュールとして使用可能。