GitHub で見る

概要

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

クイックスタート

Bootstrap をプロジェクトにすばやく追加したいですか？ 無料のオープンソース CDN である jsDelivr を使用してください。パッケージマネージャーを使用するか、ソースファイルをダウンロードする必要がありますか？ ダウンロードページへ。

CSS

CSS をロードするには、他のすべてのスタイルシートの前に、スタイルシートの <link> を <head> にコピー＆ペーストします。

<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

多くのコンポーネントは、機能するために JavaScript の使用が必要です。具体的には、jQuery、Popper、および独自の JavaScript プラグインが必要です。jQuery の slim ビルドを使用していますが、完全版もサポートされています。

それらを有効にするには、ページの最後に、閉じタグ </body> の直前に、次のいずれかの <script> を配置します。jQuery が最初に来て、次に Popper、そして JavaScript プラグインが来なければなりません。

バンドル

2つのバンドルのいずれかで、すべての Bootstrap JavaScript プラグインを含めます。bootstrap.bundle.js と bootstrap.bundle.min.js の両方に、ツールチップとポップオーバー用のPopperが含まれていますが、jQueryは含まれていません。jQuery を最初に含め、次に Bootstrap JavaScript バンドルを含めます。Bootstrap に含まれるものの詳細については、コンテンツセクションを参照してください。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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>

分離

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

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.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="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>

コンポーネント

どのコンポーネントが jQuery、JavaScript、Popper を明示的に必要とするかを知りたいですか？ 下の「JavaScript を必要とするコンポーネントを表示」リンクをクリックしてください。ページ構造について不明な場合は、サンプルページテンプレートを引き続き参照してください。

JavaScript を必要とするコンポーネントを表示
  • 閉じるためのアラート
  • 状態の切り替えとチェックボックス/ラジオ機能のためのボタン
  • すべてのスライド動作、コントロール、インジケーターのためのカルーセル
  • コンテンツの表示/非表示を切り替えるための Collapse
  • 表示と配置のためのドロップダウン（Popperも必要です）
  • 表示、配置、およびスクロール動作のためのモーダル
  • レスポンシブ動作を実装するために Collapse プラグインを拡張するためのナビゲーションバー
  • スクロール動作とナビゲーションの更新のためのスクロールスパイ
  • 表示と配置のためのツールチップとポップオーバー（Popperも必要です）

スターターテンプレート

ページが最新のデザインおよび開発標準で設定されていることを確認してください。つまり、HTML5 doctype を使用し、適切なレスポンシブ動作のためにビューポートメタタグを含める必要があります。すべてをまとめると、ページは次のようになります

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <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">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
    -->
  </body>
</html>

これはページ全体の要件に必要なすべてです。サイトのコンテンツとコンポーネントのレイアウトを開始するには、レイアウトドキュメントまたは公式サンプルを参照してください。

重要なグローバル設定

Bootstrap は、使用時に注意する必要があるいくつかの重要なグローバルスタイルと設定を採用しており、そのすべてが、ほぼ独占的にクロスブラウザスタイルの正規化を目的としています。詳しく見ていきましょう。

HTML5 doctype

Bootstrap には HTML5 doctype の使用が必要です。それがないと、いくつかの奇妙な不完全なスタイルが表示されますが、それを含めても大きな問題は発生しないはずです。

<!doctype html>
<html lang="en">
  ...
</html>

レスポンシブメタタグ

Bootstrap はモバイルファーストで開発されており、モバイルデバイス向けにコードを最初に最適化し、次に CSS メディアクエリを使用して必要に応じてコンポーネントをスケールアップする戦略です。すべてのデバイスで適切なレンダリングとタッチズームを確保するために、レスポンシブビューポートメタタグを <head> に追加します。

<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 カスタム検索エンジンなど、一部のサードパーティソフトウェアで問題が発生する可能性があります。

まれにそれを上書きする必要がある場合は、次のようなものを使用します

.selector-for-some-widget {
  box-sizing: content-box;
}

上記のスニペットでは、::before および ::after を介して生成されたコンテンツを含む、ネストされた要素はすべて、その .selector-for-some-widget に指定された box-sizing を継承します。

CSS Tricks でのボックスモデルとサイズ調整の詳細をご覧ください。

Reboot

クロスブラウザレンダリングを改善するために、Reboot を使用して、ブラウザとデバイス間の不整合を修正し、一般的な HTML 要素にわずかに意見の多いリセットを提供します。

コミュニティ

Bootstrap の開発の最新情報を入手し、これらの役立つリソースを使用してコミュニティに問い合わせてください。

  • 公式 Bootstrap ブログを読んで購読してください。
  • IRC で仲間の Bootstrapper とチャットします。irc.libera.chat サーバーの #bootstrap チャネルで。
  • 実装に関するヘルプは、Stack Overflow（bootstrap-4でタグ付けされています）で見つけることができます。
  • 開発者は、npm または同様の配信メカニズムを通じて配布する際に、Bootstrap の機能を変更または追加するパッケージにキーワード bootstrap を使用して、最大限の可視性を確保する必要があります。

Twitter の @getbootstrap をフォローして、最新のゴシップや素晴らしいミュージックビデオを入手することもできます。

CSPs と埋め込み SVG

いくつかの Bootstrap コンポーネントには、コンポーネントのスタイルをブラウザーやデバイス間で一貫して簡単に設定するために、CSS に埋め込まれた SVG が含まれています。より厳格なCSP構成を持つ組織の場合、埋め込み SVG のすべてのインスタンス（すべて background-image を介して適用されます）を文書化しているため、オプションをより徹底的に確認できます。

コミュニティでの会話に基づき、独自のコードベースでこれに対処するためのいくつかのオプションには、URL をローカルでホストされているアセットに置き換えること、画像を削除してインライン画像を使用すること（すべてのコンポーネントでは不可能）、および CSP を変更することが含まれます。推奨事項は、独自のセキュリティポリシーを慎重に確認し、必要に応じて最適な進むべき道を決定することです。