パワフルで拡張性があり、機能満載のフロントエンドツールキットです。Sassで構築およびカスタマイズし、組み込みのグリッドシステムとコンポーネントを利用し、強力なJavaScriptプラグインでプロジェクトを現実のものにしましょう。
npm i bootstrap@5.3.3CDNを使用するか、パッケージマネージャーを介してインストールするか、ソースコードをダウンロードして、Bootstrapを使った構築にすぐに飛び込みましょう。
npm、RubyGems、Composer、またはMeteorを介して、BootstrapのソースSassおよびJavaScriptファイルをインストールします。パッケージ管理されたインストールには、ドキュメントや完全なビルドスクリプトは含まれていません。また、Examplesリポジトリのデモを使用して、Bootstrapプロジェクトをすばやく開始することもできます。
npm install bootstrap@5.3.3gem install bootstrap -v 5.3.3詳細および追加のパッケージマネージャーについては、インストールドキュメントをご覧ください。
Bootstrapのコンパイル済みCSSまたはJSのみを含める必要がある場合は、jsDelivrを使用できます。シンプルなクイックスタートで動作を確認するか、サンプルを参照して、次のプロジェクトをすぐに開始してください。PopperとJavaScriptを別々に含めることもできます。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>Bootstrapは、モジュール式でカスタマイズ可能なアーキテクチャのためにSassを利用しています。必要なコンポーネントのみをインポートし、グラデーションやシャドウなどのグローバルオプションを有効にし、変数、マップ、関数、およびmixinを使用して独自のCSSを記述します。
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/variables-dark";
@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を使用する方法の詳細をご覧ください。
Bootstrap 5は、グローバルテーマスタイル、個々のコンポーネント、およびユーティリティでCSS変数をより有効活用できるように、リリースごとに進化しています。色、フォントスタイルなど、どこでも使用できる:rootレベルの変数を多数提供しています。コンポーネントとユーティリティでは、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);
}グローバル、コンポーネント、またはユーティリティクラスの変数をオーバーライドして、好みに合わせて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;
}Bootstrap 5の新機能、ユーティリティはUtility APIによって生成されるようになりました。これは、迅速かつ簡単にカスタマイズできる機能満載のSassマップとして構築しました。ユーティリティクラスの追加、削除、変更がこれまでになく簡単になりました。ユーティリティをレスポンシブにし、疑似クラスバリアントを追加し、カスタム名を付けます。
以下のナビゲーションの例のように、含まれているユーティリティクラスをコンポーネントに適用して、外観をカスタマイズします。位置やサイズ設定から、色や効果まで、数百のクラスを利用できます。CSS変数のオーバーライドと組み合わせて、さらに多くのコントロールを実現します。
<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
<li class="nav-item" role="presentation">
<button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
</li>
</ul>
BootstrapのユーティリティAPIを使用して、含まれているユーティリティを変更したり、プロジェクト用の独自のカスタムユーティリティを作成したりできます。最初にBootstrapをインポートしてから、Sassマップ関数を使用してユーティリティを変更、追加、または削除します。
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
切り替え可能な隠し要素、モーダルおよびオフキャンバスメニュー、ポップオーバーおよびツールチップなどを、jQueryなしで追加できます。BootstrapのJavaScriptはHTMLファーストであり、ほとんどのプラグインはHTMLのdata属性を使用して追加されます。より詳細なコントロールが必要ですか？個々のプラグインをプログラムで含めてください。
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><button class="dropdown-item" type="button">Dropdown item</button></li>
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
</ul>
</div>
モジュールとしてのJavaScriptとプログラマティックAPIの使用の詳細をご覧ください。
Bootstrapには、どのプロジェクトにもドロップできる12個のプラグインがあります。すべてを一度にドロップするか、必要なものだけを選択します。
Bootstrap Iconsは、1,800を超えるグリフを搭載したオープンソースのSVGアイコンライブラリであり、リリースごとに追加されます。Bootstrap自体を使用するかどうかにかかわらず、あらゆるプロジェクトで動作するように設計されています。それらをSVGまたはアイコンフォントとして使用します。どちらのオプションも、ベクタースケーリングとCSSによる簡単なカスタマイズを提供します。
公式BootstrapテーママーケットプレイスのプレミアムテーマでBootstrapを次のレベルに引き上げましょう。テーマは、独自の拡張フレームワークとしてBootstrap上に構築されており、新しいコンポーネントとプラグイン、ドキュメント、および強力なビルドツールが豊富です。
