Bootstrap入門

Bootstrapは、強力で機能満載のフロントエンドツールキットです。プロトタイプから製品版まで、何でも数分で構築できます。

このページの内容

クイックスタート

ビルド手順を必要とせずに、CDN経由でBootstrapの本番環境に対応したCSSとJavaScriptを含めることで、すぐに使い始めることができます。このBootstrap CodePenデモで実際に確認してください。

プロジェクトルートに新しいindex.htmlファイルを作成します。 モバイルデバイスで適切なレスポンシブ動作を実現するために、<meta name="viewport">タグも含めます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

BootstrapのCSSとJSを含めます。 CSSの<link>タグは<head>に、JavaScriptバンドル（ドロップダウン、ポップオーバー、ツールチップの位置決めのためのPopperを含む）の<script>タグは</body>の直前に配置します。CDNリンクの詳細はこちらをご覧ください。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

PopperとJSを個別に含めることもできます。ドロップダウン、ポップオーバー、ツールチップを使用しない場合は、Popperを含めないことで数キロバイト節約できます。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

こんにちは、世界！ 選択したブラウザでページを開くと、Bootstrapが適用されたページが表示されます。これで、独自のレイアウトを作成し、多数のコンポーネントを追加し、公式のサンプルを利用することで、Bootstrapを使用して構築を開始できます。

CDNリンク

参考までに、主なCDNリンクを以下に示します。

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

CDNを使用して、コンテンツページに記載されている追加ビルドを取得することもできます。

次のステップ

Bootstrapが利用する重要なグローバル環境設定について、もう少し詳しく読んでください。
Bootstrapに含まれる内容については、コンテンツセクションと、以下のJavaScriptを必要とするコンポーネントのリストをご覧ください。
もう少しパワーが必要ですか？パッケージマネージャーを使用してソースファイルを含めることで、Bootstrapを使用してビルドすることを検討してください。
<script type="module">を使用してBootstrapをモジュールとして使用したいですか？ Bootstrapをモジュールとして使用するセクションを参照してください。

JSコンポーネント

どのコンポーネントがJavaScriptとPopperを明示的に必要とするか知りたいですか？一般的なページ構造について少しでも不明な点がある場合は、サンプルページテンプレートを読み続けてください。

閉じるアラート
状態の切り替えとチェックボックス/ラジオボタン機能のためのボタン
すべてのスライド動作、コントロール、インジケーターのためのカルーセル
コンテンツの表示/非表示を切り替えるための折りたたみ
表示と位置決めのためのドロップダウン（Popperも必要）
表示、位置決め、スクロール動作のためのモーダル
レスポンシブな動作を実装するためのCollapseとOffcanvasプラグインを拡張するナビバー
コンテンツペインを切り替えるためのタブプラグイン付きナビゲーション
表示、位置決め、スクロール動作のためのオフキャンバス
スクロール動作とナビゲーションの更新のためのスクロールスパイ
表示と閉じるためのトースト
表示と位置決めのためのツールチップとポップオーバー（Popperも必要）

重要なグローバル設定

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">

クイックスタートで、実際に動作している例を見ることができます。

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のボックスモデルとサイズ変更についてもっと学んでください。

リブート

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

コミュニティ

これらの便利なリソースを使用して、Bootstrapの開発に関する最新情報を入手し、コミュニティに連絡してください。

Bootstrap公式ブログを読んで購読してください。
質問をして、GitHubディスカッションをご覧ください。
コミュニティDiscordまたはBootstrap subredditで、議論したり、質問したりしてください。
IRCで仲間のBootstrapperとチャットしてください。 `irc.libera.chat`サーバーの`#bootstrap`チャンネルです。
実装に関するヘルプは、Stack Overflow（`bootstrap-5`タグ付き）で見つけることができます。
開発者は、npmまたは同様の配信メカニズムを通じて配布する際に、Bootstrapの機能を変更または追加するパッケージにキーワード`bootstrap`を使用する必要があります。これにより、最大限の発見可能性が得られます。

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