レンタルサーバー速度比較記事はこちら

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

公式CDN

Bootstrap4の公式CDNはこちら。

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

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

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

ファイルの説明

Complete CSS

bootstrap.css(bootstrap.min.css)

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

Complete JavaScript

bootstrap.js(bootstrap.min.js)

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

Popper.jsとjQuery

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

読み込む順番は、

  1. jQuery
  2. Popper.js
  3. Bootstrap.js

となっています。

Complete 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以上を使用したほうが良いでしょう。(セキュリティ的にも)

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の機能を使わないのであれば削除可能の部分です。

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/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>

</body>
</html>

サンプルコードはjQuery3.3.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 Bootstrap 4 フロントエンド開発の教科書 書評:Bootstrap 4 フロントエンド開発の教科書

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です