メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

はじめに（Get started with Bootstrap） v5.2.0更新

Bootstrapは、強力な機能満載のフロントエンドツールキット。試作品から製品まで、何でも数分で構築できる。

※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。
このページの項目

クイックスタート（Quick start）v5.2.0-beta1時点

構築手順を必要とせずに、CDNを経由してBootstrapの本番環境に対応したCSSとJavaScriptを組み込むことから使用開始。このBootstrapCodePenデモで実際に試して下さい。

  1. プロジェクトのルートディレクトリに新しい index.html ファイルを作成。モバイルデバイスでの適切なレスポンシブ動作のために、<meta name="viewport"> タグも入れる。
    2. HTML<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrapのデモ</title>
  </head>
  <body>
    <h1>こんにちは!</h1>
  </body>
</html>
  2. BootstrapのCSSとJSを入れる。<head> 内にCSSの <link> タグを配置し、</body> の直前に、（ドロップダウン、ポッパー、ツールチップを配置するためのPopperを含む）JavaScriptバンドルの <script> タグを配置。詳細はCDNリンクを参照。
    3. HTML<!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="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <h1>こんにちは!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

    PopperとJSを別々に入れることもできる。ドロップダウン、ポップオーバー、ツールチップを使用する予定がない場合は、Popperを入れなければ数キロバイト節約できる。

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
  3. こんにちは！選択したブラウザでページを開き、Bootstrapが入ったページを表示。これで、独自のレイアウトを作成し、数十のコンポーネントを追加し、実例を利用することで、Bootstrapを使用したページの構築が始められる。
【変更履歴】
  • 【v5.0.0-alpha1】
    • レスポンシブ・メタタグの設定で shrink-to-fit=no が不要に
    • jQueryの設置が不要に
  • 【v5.0.0-alpha2】
    • Popperのバージョンが1.16.0から1.16.1に（v4.5.1でバックポート）
  • 【v5.0.0-alpha3】
    • CDNの提供元：StackPath（https://stackpath.bootstrapcdn.com/）⇒jsDelivr（https://www.jsdelivr.com/）（v4.5.3でバックポート）
  • 【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に
  • 【v5.2.0-beta1】
    • Popperのバージョンが2.10.2から2.11.5に

参考までに、主要なCDNリンクを掲載。

説明 URL
CSS https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js

CDNを使用して、ファイルの内容に記載されているファイルを読み込むこともできる。

次のステップ（Next steps）v5.2.0新設

JSコンポーネント（JS Components）

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

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

重要なグローバルスタイル（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に意見(Issues)を提起したり、プルリクエスト(PR)を送信して、Bootstrapの開発に関わることもできる。Bootstrapがどのように開発されているかについては、貢献へのガイドライン（英語）を読んで下さい。