ブートストラップを始める

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

このページでは

クイックスタート

ビルド手順を必要とせずに、CDN を介して Bootstrap の本番環境対応の CSS と JavaScript を含めることから始めましょう。このBootstrap CodePen demoで実際に見てください。

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>タグと JavaScript バンドルのタグ (ドロップダウン、ポッパー、ツールチップを配置するためのポッパーを含む) を終了の前に配置します。CDN リンクの詳細をご覧ください。<head><script></body>

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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

CDN リンク

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

説明	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

CDN を使用して、目次ページにリストされている追加のビルドを取得することもできます。

次のステップ

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

JS コンポーネント

どのコンポーネントが JavaScript と Popper を明示的に必要としているか知りたいですか? 下の [show components] リンクをクリックします。一般的なページ構造がまったくわからない場合は、ページテンプレートの例を読み続けてください。

JavaScript が必要なコンポーネントを表示する

却下のアラート
状態とチェックボックス/ラジオ機能を切り替えるためのボタン
すべてのスライド動作、コントロール、およびインジケーターのカルーセル
折りたたんでコンテンツの表示を切り替える
表示と配置のためのドロップダウン ( Popperも必要)
表示、配置、およびスクロール動作のモーダル
Collapse および Offcanvas プラグインを拡張してレスポンシブ動作を実装するための Navbar
コンテンツペインを切り替えるためのタブプラグインを備えたナビゲーション
表示、配置、およびスクロール動作のためのオフキャンバス
スクロール動作とナビゲーションの更新のための Scrollspy
表示と非表示のトースト
表示と配置のためのツールチップとポップオーバー ( Popperも必要)

重要なグローバル

Bootstrap は、少数の重要なグローバルスタイルと設定を採用しています。これらはすべて、クロスブラウザースタイルの正規化にほぼ専念しています。飛び込みましょう。

HTML5 文書型

Bootstrap では、HTML5 doctype を使用する必要があります。これがないと、ファンキーで不完全なスタイルになります。

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

レスポンシブメタタグ

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

<meta name="viewport" content="width=device-width, initial-scale=1">

この例は、クイックスタートで実際に確認できます。

ボックスサイジング

CSS でより簡単なサイズ設定を行うために、グローバルbox-sizing値をからcontent-boxに切り替えborder-boxます。これによりpadding、最終的に計算された要素の幅には影響しませんが、Google マップや Google カスタム検索エンジンなどの一部のサードパーティソフトウェアで問題が発生する可能性があります。

まれにオーバーライドする必要がある場合は、次のようなものを使用します。

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

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

ボックスモデルとサイズ設定については、CSS トリックを参照してください。

リブート

クロスブラウザーレンダリングを改善するために、Rebootを使用してブラウザーとデバイス間の不一致を修正し、一般的な HTML 要素にもう少し独自のリセットを提供します。

コミュニティ

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

The Official Bootstrap Blogを読み、購読してください。
GitHub ディスカッションで質問して調べてください。
IRC で仲間の Bootstrappers とチャットします。irc.libera.chatサーバー上、チャネル#bootstrap内。
実装のヘルプは、スタックオーバーフロー (タグ付きbootstrap-5) にあります。
開発者は、 npmまたは同様の配信メカニズムをbootstrap介して配布するときに、Bootstrap の機能を変更または追加するパッケージでキーワードを使用して、発見可能性を最大限に高める必要があります。

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