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を使用する必要がある。具体的には、jQuery、Popper、BootstrapのJavaScriptプラグインが必要。以下ではjQueryのスリム版(ajaxとエフェクトモジュールを除外したバージョン)を使用しているが、フルバージョン版もサポートしている。
次の <script>
のいずれかをページの最後の方にある </body>
タグの直前に置いて有効にする。最初にjQueryを配置し、次にPopper、次にJavaScriptのプラグインを配置する必要がある。
バンドル版(Bundle)
2つのバンドル版のいずれかにすべてのBootstrapJavaScriptプラグインと依存関係が組み込まれている。bootstrap.bundle.js
と bootstrap.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の設定を必要とするコンポーネントを表示
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圧縮が少し改善されるらしい)
- viewportメタタグに
- 【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】
- 【v4.5.0】
- jQueryのバージョン:3.4.1⇒3.5.1
- 【v4.5.1】
- Popperのバージョン:1.16.0⇒1.16.1
- 【v4.6.1】
ページ全体の要件に必要なのはこれだけだが、サイトのコンテンツやコンポーネントのレイアウトの設定方法は、レイアウトの概要や実例に記載。
重要なグローバルスタイル(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の変更などがある。独自のセキュリティポリシーを注意深く確認し、必要に応じて最善の方法を決めることを推奨。
ページ移動
- 前のページ
ページがありません - 次のページ
ダウンロード