GitHubで表示

ダウンロード

コンパイル済みCSSとJavaScript、ソースコードを取得するには、Bootstrapをダウンロードするか、npm、RubyGemsなどの好みのパッケージマネージャーを使用して組み込んでください。

このページの内容

コンパイル済みCSSとJS

すぐに使えるコンパイル済みコード **Bootstrap v5.3.3** をダウンロードして、プロジェクトに簡単に組み込むことができます。これには以下が含まれます。

コンパイルおよび縮小されたCSSバンドル（CSSファイルの比較を参照）
コンパイルおよび縮小されたJavaScriptプラグイン（JSファイルの比較を参照）

これには、ドキュメント、ソースファイル、PopperなどのオプションのJavaScript依存関係は含まれていません。

ダウンロード

ソースファイル

ソースSass、JavaScript、およびドキュメントファイルをダウンロードして、独自のアセットパイプラインでBootstrapをコンパイルします。このオプションには、いくつかの追加ツールが必要です。

SassソースファイルをCSSファイルにコンパイルするためのSassコンパイラ
CSSベンダープレフィックス用のAutoprefixer

ビルドツールのフルセットが必要な場合は、Bootstrapとそのドキュメントの開発用に含まれていますが、独自の目的には適していない可能性があります。

ソースをダウンロード

サンプル

サンプルをダウンロードして確認する場合は、すでにビルド済みのサンプルを入手できます。

サンプルをダウンロード

jsDelivr経由のCDN

jsDelivrを使用してダウンロードをスキップし、キャッシュされたバージョンのBootstrapのコンパイル済みCSSとJSをプロジェクトに配信します。

<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>

コンパイル済みJavaScriptを使用していて、Popperを個別に含める場合は、できればCDN経由で、JSの前にPopperを追加してください。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

代替CDN

jsDelivrを推奨し、ドキュメントでも使用しています。ただし、特定の国や環境など、場合によっては、cdnjsやunpkgなどの他のCDNプロバイダーを使用する必要がある場合があります。

これらのCDNプロバイダーには、URLは異なりますが、同じファイルがあります。cdnjsでは、この直接Bootstrapパッケージリンクを使用して、Bootstrapの任意のバージョンの各distファイルのすぐに使用できるHTMLスニペットをコピーして貼り付けることができます。

特定のファイルのSRIハッシュが異なる場合、そのファイルは他の人によって変更されたことを意味するため、そのCDNのファイルを使用しないでください。

同じ長さのハッシュを比較する必要があることに注意してください。たとえば、`sha384`と`sha384`を比較します。そうでない場合、ハッシュが異なることが予想されます。そのため、SRI Hash Generatorなどのオンラインツールを使用して、特定のファイルのハッシュが同じであることを確認できます。または、OpenSSLがインストールされていると仮定すると、CLIから同じことを実現できます。たとえば、

openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A

パッケージマネージャー

最も人気のあるパッケージマネージャーを使用して、Bootstrapの**ソースファイル**をほぼすべてのプロジェクトに組み込みます。パッケージマネージャーに関係なく、Bootstrapは、公式のコンパイル済みバージョンと一致する設定のために、**SassコンパイラとAutoprefixer**が必要です。

npm

npmパッケージを使用して、Node.js poweredアプリにBootstrapをインストールします。

npm install bootstrap@5.3.3

`const bootstrap = require('bootstrap')`または`import bootstrap from 'bootstrap'`は、Bootstrapのすべてのプラグインを`bootstrap`オブジェクトにロードします。 `bootstrap`モジュール自体は、すべてのプラグインをエクスポートします。パッケージのトップレベルディレクトリにある`/js/dist/*.js`ファイルをロードすることにより、Bootstrapのプラグインを手動で個別にロードできます。

Bootstrapの`package.json`には、次のキーの下に追加のメタデータが含まれています。

`sass` - BootstrapのメインSassソースファイルへのパス
`style` - デフォルト設定（カスタマイズなし）を使用してコンパイルされた、Bootstrapの縮小されていないCSSへのパス

**スタータープロジェクトを使用してnpm経由でBootstrapを始めましょう！** Sass＆JSサンプルテンプレートリポジトリにアクセスして、独自のnpmプロジェクトでBootstrapをビルドおよびカスタマイズする方法を確認してください。 Sassコンパイラ、Autoprefixer、Stylelint、PurgeCSS、およびBootstrapアイコンが含まれています。

yarn

yarnパッケージを使用して、Node.js poweredアプリにBootstrapをインストールします。

yarn add bootstrap@5.3.3

RubyGems

Bundler（**推奨**）とRubyGemsを使用して、`Gemfile`に次の行を追加することにより、RubyアプリにBootstrapをインストールします。

gem 'bootstrap', '~> 5.3.3'

または、Bundlerを使用していない場合は、次のコマンドを実行してgemをインストールできます。

gem install bootstrap -v 5.3.3

詳細については、gemのREADMEを参照してください。

Composer

Composerを使用して、BootstrapのSassとJavaScriptをインストールおよび管理することもできます。

composer require twbs/bootstrap:5.3.3

NuGet

.NET Frameworkで開発している場合は、NuGetを使用して、BootstrapのCSSまたはSassとJavaScriptをインストールおよび管理することもできます。 NuGetはコンパイル済みコード用であり、フロントエンドアセット用ではないため、新しいプロジェクトではlibmanまたは別の方法を使用する必要があります。

Install-Package bootstrap

Install-Package bootstrap.sass