強力で拡張可能、機能満載のフロントエンドツールキット。Sassで構築とカスタマイズを行い、事前構築されたグリッドシステムとコンポーネントを活用し、強力なJavaScriptプラグインでプロジェクトに命を吹き込みます。
npm i bootstrap@5.3.8Bootstrapでの構築をすぐに始めましょう。CDNを使用するか、パッケージマネージャー経由でインストールするか、ソースコードをダウンロードできます。
npm、RubyGems、Composer、またはMeteor経由でBootstrapのソースSassおよびJavaScriptファイルをインストールできます。パッケージマネージャー経由のインストールには、ドキュメントや完全なビルドスクリプトは含まれません。また、Examplesリポジトリのデモを使用して、Bootstrapプロジェクトを素早く開始することもできます。
npm install bootstrap@5.3.8gem install bootstrap -v 5.3.8詳細情報と追加のパッケージマネージャーについては、インストールドキュメントをご覧ください。
BootstrapのコンパイルされたCSSまたはJSのみを含める必要がある場合は、jsDelivrを使用できます。シンプルなクイックスタートで実際の動作を確認するか、サンプルを閲覧して次のプロジェクトを開始できます。PopperとJSを個別に含めることもできます。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-64UC4BEhTGwk3eGpak4nO2jqtl7liTS+juXkSJ2gPAQPmlClQO7s5UgCeR6US48g" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-jdSIJTK9l6XwXj3RixpVDXtMcA2bFd9O81RlLAwhpr2oXRqvQP88rr16IeFXTgFE" crossorigin="anonymous"></script>Bootstrapは、モジュール式でカスタマイズ可能なアーキテクチャのためにSassを活用しています。必要なコンポーネントのみをインポートし、グラデーションや影などのグローバルオプションを有効にし、変数、マップ、関数、ミックスインを使用して独自の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";BootstrapでSassを使用する方法について詳しく見る。
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の新機能として、ユーティリティはユーティリティ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プラグインのほぼすべてが一流のdata 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には、どんなプロジェクトにも導入できる十数個のプラグインがあります。すべてを一度に導入することも、必要なものだけを選択することもできます。
Bootstrap Iconsは、1,800以上のグリフを備えたオープンソースのSVGアイコンライブラリで、リリースごとに追加されています。Bootstrap自体を使用するかどうかに関わらず、どんなプロジェクトでも機能するように設計されています。SVGまたはアイコンフォントとして使用でき、どちらのオプションでもベクタースケーリングとCSS経由での簡単なカスタマイズが可能です。
