メインコンテンツへスキップ

はじめに（Introduction）

jsDelivrとテンプレートスターターページで、レスポンシブなモバイルサイトを構築する世界で最も人気のあるフレームワークであるBootstrapを使い始める。

目次

クイックスタート（Quick start）v5.1.3時点

迅速にBootstrapを追加するためには、無料のオープンソースCDNであるjsDelivrを使用すること。パッケージマネージャを使用したり、ソースファイルをダウンロードする必要がある場合はダウンロードページから入手。

CSSを読み込むためには、<head> の中の他のすべてのスタイルシートの前に、Bootstrapのスタイルシート <link> をコピー＆ペースト。

CSS v5.1.3時点

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS v5.1.3時点

多くのコンポーネントでは、機能するためにJavaScriptの使用を必要がある。具体的には、独自のJavaScriptプラグインとPopperが必要。次のいずれかの <script> をページの最後の方にある </body> 終了タグの直前に配置して、ページを有効にする。

バンドル版（Bundle）

2つのバンドル版のいずれかにすべてのBootstrapJavaScriptプラグインと依存関係が組み込まれている。bootstrap.bundle.js と bootstrap.bundle.min.js の両方に、ツールチップとポップオーバー用のPopperが組み込まれている。Bootstrapの内容の詳細ついては、コンパイル済のファイルの項目に記載。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

分離版（Separate）

スクリプトソリューションを別々に使用する場合は、Popperを最初に配置し（ツールチップやポップオーバーを使用している場合）、次にJavaScriptプラグインを配置する必要がある。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

※コードにはCDNからのクロスサイトスクリプティング(XSS)を防ぐため integrity 属性と crossorigin 属性を追加する。
参考：[Chrome 45+][Firefox 43+][Opera 32+] CDNからのXSSを防ぐ（Qiita）

【変更履歴】
  • 【v5.0.0-alpha1】
    • jQueryの設置が不要に
  • 【v5.0.0-alpha2】（v4.5.1でバックポート）
    • Popperのバージョンが1.16.0から1.16.1に
  • 【v5.0.0-alpha3】（v4.5.3でバックポート）
    • CDNの提供元：StackPath（https://stackpath.bootstrapcdn.com/）⇒jsDelivr（https://www.jsdelivr.com/）
  • 【v5.0.0-beta1】
    • Popper v2に対応（バージョンが1.16.1から2.5.4に）
  • 【v5.0.0-beta2】
    • Popperのバージョンが2.5.4から2.6.0に
  • 【v5.0.0-beta3】
    • Popperのバージョンが2.6.0から2.9.1に
  • 【v5.0.0】
    • Popperのバージョンが2.9.1から2.9.2に
  • 【v5.1.0】
    • Popperのバージョンが2.9.2から2.9.3に
  • 【v5.1.1】
    • Popperのバージョンが2.9.3から2.10.1に
  • 【v5.1.2】
    • Popperのバージョンが2.10.1から2.10.2に

モジュール版（Modules）

<script type="module"> を使用する場合は、モジュールとしてのBootstrapの使い方の項目に記載。

コンポーネント（Components）

どのコンポーネントが明示的にBootstrapのJavaScriptとPopperを必要とするのか知りたいなら、以下の「コンポーネントを表示」リンクをクリックして確認。一般的なページ構造については、設定例のテンプレートに記載。

JavaScriptの設定を必要とするコンポーネントを表示
  • アラート、モーダル、トーストを閉じるボタン
  • ボタンによるON/OFF切替とチェックボックス/ラジオ機能
  • カルーセルのすべてのスライド動作、コントロール、インジケータ
  • 折り畳みのコンテンツの表示切替
  • ドロップダウンの表示と配置（Popperも必要）
  • モーダル動作の表示、配置、スクロール
  • 折り畳みプラグインを拡張してナビゲーションバーでレスポンシブ動作を実装
  • オフキャンバス動作の表示、配置、スクロール
  • 表示して閉じるためのトースト
  • ツールチップとポップオーバーの表示と配置（Popperも必要）
  • スクロールスパイのスクロール動作とナビゲーション更新
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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>
  <body>
    <h1>こんにちは!</h1>
    ...
    
    <!-- オプションのJavaScript：2つのうちどちらかを選択すること！ -->
    
    <!-- オプション1：Popperを使用したBootstrapバンドル版 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    
    <!-- オプション2：最初にPopper、次にBootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
     -->
  </body>
</html>

 

基本のテンプレート（Starter template）v5.1.3時点

最新のデザインと開発標準でページを設定する。つまりHTML5 doctypeを使用し、適切なレスポンシブ動作を実現するためにviewportメタタグを含める。まとめると、ページは次のようになる：

Bootstrap5.xの設定例 緑背景が変更箇所
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap基本テンプレート</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>こんにちは!</h1>
    ...
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
※Bootstrap4.xの設定例 赤背景が変更箇所
<!doctype html>
<html lang="ja">
  <head>
    <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://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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">
    を入れる
  • popper.min.js（Popper）はツールチップやポップオーバーで使用する位置決め用のサードパーティのライブラリファイル（v5.1.3時点でPopper v2.10.2に対応）
【変更履歴】
  • 【v5.0.0-alpha1】
    • レスポンシブ・メタタグの設定で shrink-to-fit=no が不要に
    • jQueryの設置が不要に
  • 【v5.0.0-beta1】
    • Popper v2に対応

次のステップについては、レイアウトのグリッドや実例にアクセスして、サイトのコンテンツやコンポーネントのレイアウトの設定を開始する。

 

重要なグローバルスタイル（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">

基本のテンプレートでこの動作の実例を見られる。

【変更履歴】
  • 【v5.0.0-alpha1】
    • shrink-to-fit=no が不要に（shrink-to-fit=no はiOS9.0のSafariで initial-scale=1 が適用されないのを回避するために設定するが、v5ではiOS9.0がサポート外になったため）

ボックスサイズ（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-5）にある
  • 開発者は、最大の発見性を得るためにnpmや同様の配信メカニズムを経由して配布する場合、Bootstrapの機能を変更や追加するパッケージにキーワード bootstrap を使用する必要がある。

Twitterで@getbootstrapをフォローして、最新の噂話や素晴らしいミュージックビデオの入手もできる。

※BootstrapのGitHubに問題を提起したり、プルリクエストを送信して、Bootstrapの開発に関わることもできる。Bootstrapがどのように開発されているかについては、貢献へのガイドライン（英語）を読むこと。