ダウンロード(Download)
Bootstrapをダウンロードして、コンパイル済のCSSやJavaScriptファイルやソースコードを入手したり、npm, RubyGemsなどの好きなパッケージマネージャーに追加する。
コンパイル済CSSとJSファイル版(Compiled CSS and JS)v5.2.0-beta1時点
Bootstrap v5最新版用のすぐに使えるコンパイル済コードをダウンロードすれば、自分のプロジェクトに簡単に導入できる。
- コンパイル済(デフォルト:
bootstrap.css
、グリッド部分のみ:bootstrap-grid.css
、Rebootのみ:bootstrap-reboot.css
)、軽量版(デフォルト:bootstrap.min.css
、グリッド部分のみ:bootstrap-grid.min.css
、Rebootのみ:bootstrap-reboot.min.css
)のCSSバンドル(CSSファイルの比較) - コンパイル済(デフォルト:
bootstrap.js
、含Popper:bootstrap.bundle.js
、ES Modules対応版:bootstrap.esm.js
)、軽量版(デフォルト:bootstrap.min.js
、含Popper:bootstrap.bundle.min.js
、ES Modules対応版:bootstrap.esm.min.js
)のJavaScriptプラグイン(JSファイルの比較)
これには、解説、ソースファイル、Popperのような任意のJavaScript依存関係ファイルは含まれない。
ソースファイル版(Source files)v5.2.0-beta1時点
ソースSass、JavaScript、ドキュメント(解説)ファイルをダウンロードして、プロジェクトのアセットパイプラインでBootstrapをコンパイルする。このオプションを使用するには、次のツールが必要:
- SassソースファイルのCSSファイルコンパイル用Sassコンパイラ
- CSSベンダープレフィックス用Autoprefixer
構築ツールのフルセットが必要な場合、開発向けにBootstrapとドキュメントが組み込まれているが、独自の目的には適さない可能性が高い。
ソースのダウンロード※ダウンロードファイルの内容はこちら。
実例(Example)v5.0.0-alpha1新設
実例をダウンロードして確認したい場合は、すでに構築済の実例が入手できる。
※公式サイトの実例なのでダウンロードファイルは英語だが、当サイトの実例にある各ファイルでは日本語のソースコードをコピーできる。
jsDelivr経由のCDN(CDN via jsDelivr)v5.2.0-beta1時点
jsDelivrを使用してダウンロードを省略し、Bootstrapのコンパイル済CSSとJSのキャッシュされたバージョンをプロジェクトに配信。
HTML<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
コンパイル済のJavaScriptを使用していて、Popperを個別に組み込む場合は、CDNを経由してJSの前にPopperを入れて下さい。
HTML<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
【変更履歴】
- 【v5.0.0-alpha3】
- CDNの提供元:StackPath(https://stackpath.bootstrapcdn.com/)⇒jsDelivr(https://www.jsdelivr.com/)(v4.5.3でバックポート)
※詳細については、クイックスタートに記載。
パッケージマネージャー(Package managers)v5.2.0-beta1時点
Bootstrapのソースファイルを、最も人気のあるパッケージマネージャーを使用して、ほぼ全てのプロジェクトに取り込む。パッケージマネージャーに関係なく、公式のコンパイル済のBootstrapのバージョンに一致するセットアップ用のSassコンパイラとAutoprefixerが必要。
npm
npmパッケージを使って、Node.jsで動くアプリケーションにBootstrapをインストール:
実行コマンド$ npm install bootstrap@5.2.0-beta1
const bootstrap = require('bootstrap')
や import bootstrap from 'bootstrap'
は、全てのBootstrapプラグインを bootstrap
オブジェクトに読み込む。bootstrap
モジュール自体がBootstrapのプラグインを全てエクスポートしている。パッケージの最上位ディレクトリの下にある /js/*.js
ファイルを読み込むことで、Bootstrapのプラグインを個別に手動で読み込める。
Bootstrapの package.json
は、次のキーの下にいくつかの追加のメタデータが組み込まれている:
sass
- BootstrapのメインのSassソースファイルへのパスstyle
- デフォルト設定(カスタマイズなし)を使用したコンパイル済のBootstrapの非軽量版CSSへのパス
スタータープロジェクトでnpm経由でBootstrapを始めよう!twbs/bootstrap-npm-starterテンプレートリポジトリにアクセスして、独自のnpmプロジェクトでBootstrapの構築やカスタマイズする方法を確認する。Sassコンパイラ、Autoprefixer、Stylelint、PurgeCSS、Bootstrapアイコンが組み込まれている。
※最新版のv1.4.0はBootstrap4に対応しており、Bootstrap5用に更新予定...
※npmを使ったBootstrap5の環境構築:Bootstrap5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説(coliss)
yarn
yarnパッケージを使って、Node.jsで動くアプリケーションにBootstrapをインストール:
実行コマンドyarn add bootstrap@5.2.0-beta1
RubyGems
Gemfile
に次の行を追加して、Bundler(推奨)やRubyGemsのアプリケーションを使って、RubyにBootstrapをインストール:
実行コマンドgem 'bootstrap', '~> 5.2.0-beta1'
Bundlerを使用していない場合は、次のコマンドを実行してgemをインストール:
実行コマンド$ gem install bootstrap -v 5.2.0-beta1
詳細については、Bootstrap Ruby GemのREADMEに記載。
Composer
また、Composerを使用してBootstrapのSassとJavaScriptをインストールして管理することもできる:
実行コマンド$ composer require twbs/bootstrap:5.2.0-beta1
NuGet
.NET Frameworkで開発する場合は、NuGetを使用してBootstrapのCSSやSassとJavaScriptのインストールや管理ができる。NuGetはフロントエンドアセットではなくコンパイル済コード用に設計されているため、新しいプロジェクトではLibManか別のメソッドを使用する必要がある。
CSSの実行コマンドPM> Install-Package bootstrap
Sassの実行コマンドPM> Install-Package bootstrap.sass