Bootstrap5 インストールと使用

以下の 2 つの方法で Bootstrap5 をインストールできます：

• Bootstrap5 CDN を使用する。

• 公式サイトからgetbootstrap.comBootstrap 5 をダウンロードする。

  

Bootstrap 5 CDN

CDNJS：

注意：popper.min.js はポップアップ、ツールチップ、ドロップダウンメニューの設定に使用されます。

bootstrap.bundle.js（非圧縮版）または bootstrap.bundle.min.js（圧縮版）には、popper.min.js やその他の依存スクリプトなどのバンドルされたプラグインが含まれているため、以下のコードを直接使用することもできます：

さらに、以下の CDN サービスを使用することもできます：

• 国内（中国）での推奨 1：https://cdn.bytedance.com/
• 国内（中国）での推奨 2：https://www.staticfile.net/
• 国際的に推奨：https://cdnjs.com/

Bootstrap 5 をダウンロード

公式サイトからhttps://getbootstrap.com/Bootstrap5 リソースライブラリをダウンロードできます。

注：さらに、パッケージ管理ツールの npm、yarn、gem、composer などでもインストールできます：

npm install bootstrap

yarn add bootstrap

gem install bootstrap -v 5.1.1

composer require twbs/bootstrap:5.1.1

---

最初の Bootstrap 5 ページを作成する

1、HTML5 doctype を追加

Bootstrap は HTML5 ファイルタイプを要求するため、HTML5 doctype 宣言を追加する必要があります。

HTML5 doctype はドキュメントの先頭で宣言し、対応するエンコーディングを設定します：

モバイルデバイス優先

Bootstrap で開発したウェブサイトをモバイルデバイスに適したものにし、適切なレンダリングとタッチスクリーンのズームを保証するには、ウェブページの head 内に viewport メタタグを追加する必要があります。次のようになります：

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

width=device-width幅がデバイス画面の幅であることを示します。

initial-scale=1初期のズーム倍率を示します。

---

コンテナクラス

Bootstrap 5 では、ウェブサイトのコンテンツを包むコンテナ要素が必要です。

以下の 2 つのコンテナクラスを使用できます：

• .container クラスは、固定幅でレスポンシブレイアウトに対応したコンテナに使用されます。
• .container-fluid クラスは、幅 100% でビューポート全体を占めるコンテナに使用されます。

---

2 つの Bootstrap 5 ページ

以下の例は、ビューポート全体を占めるコンテナを示しています。

その他の拡張