Bootstrap 4 tutorial

Getting started (1): スタートアップ / 利用法 / コンテンツ / ブラウザ / JavaScript

日本語 (Japanese)英語 (English)

スタートアップ

まずBootstrapの最も簡単な利用方法としてCDNを利用する方法を説明する(本チュートリアルもこの方法で作られている）。

最低限必要なHTML設定を構造で示す。⇒

CDNを利用した読み込みにはそれぞれURLとSHA-384文字列が必要。具体的な設定は公式サイトの次の例文からコピペすればよい。

⇒ Starter template

DOCTYPE宣言

HTMLの先頭は必ず <!DOCTYPE html> と書く。これは後方互換(HTML4以前との判別)用の記述で、HTML5以降の(新しい)HTML文書であることを示すのに用いられる。⇒

言語コード設定

ルート要素の html には属性 lang="{言語コード}" で文書中に主に用いる言語を設定する(ISO 639-1 のアルファベット2文字: 日本語は lang="ja")。⇒

文字エンコーディング

head ブロックの始め(ファイル先頭から1024バイト以内)にHTMLファイルの文字エンコーディングを記述するが、今は必ずUTF-8を用いること。大文字小文字の区別はない("utf-8", "UTF-8", "Utf-8" 等すべてOK)。⇒

ビューポート設定

ページの初期サイズ(幅と拡大率)を設定する。モバイル機器用ページにBootstrapを用いる場合は必ずこの設定が必要(分からなければコピペでもOK)。⇒

CDN読み込み

CDNを利用する場合は外部読み込みタグ(CSSは link, JavaScriptは script)に属性 integrity="sha384-{SHA-384文字列}" と crossorigin="anonymous" を追加する。⇒

Bootstrap CSS読み込み

通常は公式ドキュメントの Starter template の設定をそのまま使えばよい。⇒

JavaScript読み込み

BootstrapはCSSだけで実現できない機能をJavaScriptで実装している。これはjQueryプラグイン形式で実装されていることから伝統的に「(Bootstrapの) JavaScriptプラグイン」と呼ばれておりjQueryに全面依存している。また現バージョン(V4以降)はPopper.jsにも依存している。そのためこの2つを事前に読み込む必要がある。

通常は次の順番で読み込むが、jQueryとPopper.jsの間に依存性はないので1と2は逆でもよい。CDN用の全設定は Starter template を参照(内容が分からなくてもこの通り記述すれば使える)。

  1. jQuery - 1.9.1以上、Slim build (AJAX, Effectsなし版)で十分
  2. Popper.js
  3. Bootstrap JavaScript

Bootstrapの利用法

Bootstrapの様々な入手/利用方法(概要のみ)。

ファイルコンテンツ

Bootstrapのファイル内容について。

配布版(コンパイル済み)Bootstrap

(.map ファイルは除外)

Bootstrapソースコード

(主要部分のディレクトリ構造のみ)

対応ブラウザ

Bootstrap 4は現行の主要ブラウザに対応しており、対応ブラウザの条件を .browserslistrc (v4.1.2までは package.json の中)に browserslist 形式で記述している(書式は Best Practices と Full List を参照)。 ⇒ 

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

この情報は Autoprefixer を用いてCSSにベンダープリフィクスを付加する処理に用いられる。なおAutoprefixerはBootstrap CSSをカスタマイズする際の必須ツール(V3.2以降で導入)。詳しくはCSSのカスタマイズを参照。

具体的なサポート状況はオフィシャルページを参照すること。

JavaScript

BootstrapはCSSだけでは実現できない動的処理にJavaScriptを用いている(jQueryプラグインとして書かれているため「JavaScriptプラグイン」と呼ばれている)。基本的な利用(設定)方法はJavaScript読み込みを参照。

また(バンドル前の)ソースコードはES2016(ES6)形式で、Webpackなどの各種モジュールバンドル対応ツールからモジュール単位で利用することもできる。詳しくはBootstrapソースコードを参照(モジュール形式の詳細は JavaScriptモジュール形式について ボタンで表示)。

BootstrapのJavaScriptプラグインは読み込み時に自動的に初期設定を実行する(通常は自分でコードを書かなくてよい)。ただし次のコンポーネントは自分で簡単な初期化用JavaScriptコードを記述する必要がある(リンク先にコード例あり)。

data属性

動作の設定には カスタムデータ属性 data-* が用いられる。HTMLタグ中に data- で始まるBootstrap用の属性を記述し、JavaScriptの初期化時にこの設定が読み込まれ処理される。

API呼び出し

BootstrapのJavaScript APIはjQueryプラグイン仕様に基づいており、jQueryで対象要素を抽出してメソッド呼び出しすることにより機能する。以下はモーダルのAPI呼び出し例。使用できるオプション一覧は公式ドキュメントの Options、メソッドに渡すコマンド(文字列)一覧は Methods を参照。 

// 例1: デフォルト設定でインターフェースを生成(自動的に行われるため通常不要)
$('#my-modal').modal();
 
// 例2: オプションを設定(属性を用いてdata-keyboard="false"と設定するのと同様)
// (公式ドキュメントのoptionsを参照)
$('#my-modal').modal({ keyboard: false });
 
// 例3: コマンドを実行
// (公式ドキュメントのmethodsを参照)
$('#my-modal').modal('show');

イベント

Bootstrap JavaScript APIでは各コンポーネントの特定タイミングにカスタムイベントが設定してある。イベント名はjQueryの名前空間を用いてドット区切りで次のように表現されている。

次もモーダルへのイベント設定例。イベント一覧は公式ドキュメントの Events を参照すること。 

// イベント"show.bs.modal"はモーダル表示開始時に発生する
$('#my-modal').on('show.bs.modal', function(event) {
  // まだモーダルは表示していないので
  // ここでモーダルに表示する内容を設定できる
});

より詳しい実例は本チュートリアルの 起動時のコンテント更新 を参照(実際に動作しているコード例あり)。

jQueryプラグイン

.noConflict()

先に示した通り、BootstrapのJavaScript APIはjQueryプラグインとして実装されており、具体的には $.fn.button のように小文字のコンポーネント名でそのまま登録されている(他に alert, carousel, collapse, etc.)。他のjQueryプラグインと名前が衝突する場合に対応するため .noConflict() を用意している。

// Bootstrapが設定する前の$.fn.buttonに戻してから、
// Bootstrapのbuttonプラグインを返す
var bootstrapButton = $.fn.button.noConflict();
// bootstrapButtonという(衝突しない)名前で再登録
$.fn.bootstrapBtn = bootstrapButton;
デフォルト設定の変更

各プラグインのデフォルト設定は $.fn.{プラグイン名}.Constructor.Default オブジェクトに設定されており、必要に応じて次のように変更できる。

// 例: モーダルのキーボード操作のデフォルト動作をOFFにする
$.fn.modal.Constructor.Default.keyboard = false;