メインコンテンツにスキップ
Check
v5.2 の新機能 CSS 変数、レスポンシブ オフキャンバス、新しいユーティリティなど！ ブートストラップ

Bootstrap を使用して高速でレスポンシブなサイトを構築する

強力で拡張可能な機能満載のフロントエンド ツールキット。Sass で構築およびカスタマイズし、事前構築済みのグリッド システムとコンポーネントを利用し、強力な JavaScript プラグインでプロジェクトを活性化します。

npm i [email protected]
ドキュメントを読む

現在v5.2.1 · ダウンロード · v4.6.x ドキュメント · すべてのリリース

好きな方法で始めましょう

Bootstrap を使用してすぐにビルドを開始できます。CDN を使用するか、パッケージ マネージャーを介してインストールするか、ソース コードをダウンロードしてください。

インストール ドキュメントを読む

パッケージマネージャー経由でインストール

npm、RubyGems、Composer、または Meteor を介して、Bootstrap のソース Sass および JavaScript ファイルをインストールします。パッケージ管理のインストールには、ドキュメントや完全なビルド スクリプトは含まれません。npm テンプレート リポジトリを使用して、npm経由で Bootstrap プロジェクトをすばやく生成することもできます。

npm install [email protected]
gem install bootstrap -v 5.2.1

詳細と追加のパッケージ マネージャーについては、インストール ドキュメントを参照してください。

CDN経由で含める

Bootstrap のコンパイル済み CSS または JS のみを含める必要がある場合は、jsDelivrを使用できます。簡単なクイック スタートで実際の動作を確認するか、例を参照して次のプロジェクトをすぐに開始してください。Popper と JS を別々に含めることもできます。

<!-- CSS only -->
<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">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

入門ガイドを読む

公式ガイドを使用して、Bootstrap のソース ファイルを新しいプロジェクトに含めることにジャンプしてください。

ウェブパック 小包 バイト

Sassですべてをカスタマイズ

Bootstrap は、モジュラーでカスタマイズ可能なアーキテクチャに Sass を利用します。必要なコンポーネントのみをインポートし、グラデーションやシャドウなどのグローバル オプションを有効にして、変数、マップ、関数、ミックスインを使用して独自の CSS を記述します。

カスタマイズの詳細

Bootstrap の Sass をすべて含める

1 つのスタイルシートをインポートするだけで、CSS のすべての機能を使用してレースに参加できます。

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

グローバル Sass オプションの詳細をご覧ください。

必要なものを含める

Bootstrap をカスタマイズする最も簡単な方法は、必要な CSS のみを含めることです。

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

Sass で Bootstrap を使用する方法については、こちらをご覧ください。

CSS 変数を使用してリアルタイムで構築および拡張する

Bootstrap 5 はリリースごとに進化しており、グローバル テーマ スタイル、個々のコンポーネント、さらにはユーティリティの CSS 変数をより有効に活用しています。:root色、フォント スタイルなど、さまざまな場所で使用できるレベルの変数が多数用意されています。コンポーネントとユーティリティでは、CSS 変数のスコープは関連するクラスに限定されており、簡単に変更できます。

CSS 変数の詳細

CSS 変数の使用

グローバル:root変数のいずれかを使用して、新しいスタイルを記述します。CSS 変数はvar(--bs-variableName)構文を使用し、子要素に継承できます。

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

CSS 変数によるカスタマイズ

グローバル、コンポーネント、またはユーティリティ クラス変数をオーバーライドして、Bootstrap を好きなようにカスタマイズします。各ルールを再宣言する必要はなく、新しい変数値だけです。

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
}

.table {
  --bs-table-color: var(--bs-gray-600);
  --bs-table-bg: var(--bs-gray-100);
  --bs-table-border-color: transparent;
}

コンポーネント、ユーティリティ API に適合

Bootstrap 5 の新機能として、ユーティリティはUtility APIによって生成されるようになりました。すばやく簡単にカスタマイズできる機能満載の Sass マップとして構築しました。ユーティリティ クラスの追加、削除、変更がこれまでになく簡単になりました。ユーティリティをレスポンシブにし、疑似クラス バリアントを追加して、カスタム名を付けます。

ユーティリティの詳細 カスタマイズされたコンポーネントを調べる

コンポーネントをすばやくカスタマイズ
// Create and extend utilities with the Utility API

@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

jQuery を使用しない強力な JavaScript プラグイン

切り替え可能な隠し要素、モーダルとオフキャンバス メニュー、ポップオーバーとツールチップなどを jQuery なしで簡単に追加できます。Bootstrap の JavaScript は HTML ファーストです。つまり、プラグインの追加はdata属性の追加と同じくらい簡単です。さらに制御が必要ですか？プログラムで個々のプラグインを含めます。

ブートストラップ JavaScript の詳細

データ属性 API

HTML を書けるのに、なぜもっと JavaScript を書くのでしょうか? Bootstrap の JavaScript プラグインのほぼすべてがファースト クラスのデータ API を備えており、data属性を追加するだけで JavaScript を使用できます。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
  </ul>
</div>

モジュールとしての JavaScript とプログラムAPI の使用について詳しくは、こちらをご覧ください。

プラグインの包括的なセット

Bootstrap には、任意のプロジェクトにドロップできる多数のプラグインがあります。それらを一度にドロップするか、必要なものだけを選択します。

アラート

ユーザーへの警告メッセージを表示および非表示にします。

ボタン

ボタンのアクティブ状態をプログラムで制御します。

カルーセル

クロスフェードのサポートを含め、任意のページにスライドショーを追加します。

崩壊

コンテンツの領域を展開および折りたたむか、アコーディオンを作成します。

落ちる

リンク、アクション、フォームなどのメニューを作成します。

モーダル

柔軟で応答性の高いダイアログをプロジェクトに追加します。

オフキャンバス

非表示のサイドバーを構築して任意のページに切り替えます。

ポップオーバー

カスタム オーバーレイを作成します。ポッパー上に構築。

スクロールスパイ

ページのスクロールに基づいて、アクティブなナビゲーション リンクを自動的に更新します。

タブ

Bootstrap nav コンポーネントがコンテンツを切り替えられるようにします。

トースト

訪問者への通知を表示および非表示にします。

ツールチップ

ブラウザのツールチップをカスタムのものに置き換えます。ポッパー上に構築。

ブートストラップ アイコンでカスタマイズする

Bootstrap Iconsは、1,500 を超えるグリフを特徴とするオープン ソースの SVG アイコン ライブラリであり、リリースごとにさらに追加されています。Bootstrap 自体を使用するかどうかに関係なく、どのプロジェクトでも機能するように設計されています。それらを SVG またはアイコン フォントとして使用します。どちらのオプションでも、ベクターのスケーリングと CSS による簡単なカスタマイズが可能です。

ブートストラップ アイコンを取得する

ブートストラップ アイコン

公式の Bootstrap テーマで自分のものに

公式 Bootstrap テーマ マーケットプレイスのプレミアム テーマを使用して、Bootstrap を次のレベルに引き上げます。テーマは独自の拡張フレームワークとして Bootstrap 上に構築され、新しいコンポーネントとプラグイン、ドキュメント、および強力な構築ツールが豊富です。

Bootstrap テーマを閲覧する

ブートストラップ テーマ