メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

ダウンロード(Download)

Bootstrapをダウンロードして、コンパイルされたCSSやJavaScript、ソースコードを入手したり、npm, RubyGemsなどの好きなパッケージマネージャーに追加する。

コンパイル済CSSとJSファイル版(Compiled CSS and JS)v4.6.2時点

Bootstrap v4最新版用のすぐに使えるコンパイル済コードをダウンロードすれば、自分のプロジェクトに簡単に導入可能。

  • コンパイル済(デフォルト: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)、軽量版(デフォルト:bootstrap.min.js、含Popper:bootstrap.bundle.min.js)のJavaScriptプラグイン(JSファイルの比較

これには、解説、ソースファイル、任意のJavaScript依存関係ファイル (jQueryとPopper) は含まれない。

ダウンロード※ダウンロードファイルの内容はこちら

 

ソースファイル版(Source files)v4.6.2時点

ソースSass、JavaScript、ドキュメント(解説)ファイルをダウンロードして、プロジェクトのアセットパイプラインでBootstrapをコンパイルする。このオプションを使用するには、次のツールが必要:

構築ツールのフルセットが必要な場合、開発向けにBootstrapとドキュメントが組み込まれているが、独自の目的には適さない可能性が高い。

ソースのダウンロード※ダウンロードファイルの内容はこちら

 

実例(Example)v4.5.0新設

実例をダウンロードして確認したい場合は、すでに構築済の実例が入手可能。

ソースのダウンロード

※公式サイトの実例なのでダウンロードファイルは英語だが、当サイトの実例にある各ファイルでは日本語のソースコードがコピー可能。

 

jsDelivr v4.5.3設定変更

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

HTML<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

コンパイル済のJavaScriptを使用していて、Popperを個別に含める場合は、JSの前にPopperを追加する。できればCDNを使用すること。

HTML<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

※詳細については、クイックスタートに記載。

【変更履歴】

  • 【v4.5.3】
    • CDNの提供元:StackPath(https://stackpath.bootstrapcdn.com/)⇒jsDelivr(https://www.jsdelivr.com/)

 

パッケージマネージャー(Package managers)v4.5.3時点

Bootstrapのソースファイルを、最も人気のあるパッケージマネージャーを使用して、ほぼ全てのプロジェクトに取り込む。パッケージマネージャーに関係なく、公式のコンパイル済のBootstrapのバージョンに一致するセットアップ用のSassコンパイラAutoprefixerが必要。

npm

npmパッケージを使って、Node.jsで動くアプリケーションにBootstrapをインストール:

実行コード$ npm install bootstrap

require('bootstrap') は、BootstrapのjQueryのプラグインのすべてをjQueryオブジェクトに読み込む。bootstrap モジュール自体は何もエクスポートしない。パッケージの最上位ディレクトリの下にある /js/*.js ファイルを読み込むことで、Bootstrapのプラグインを個別に手動で読み込むことが可能。

Bootstrapの package.json は、次のキーの下にいくつかの追加のメタデータが組み込まれている:

  • sass - BootstrapのメインのSassソースファイルへのパス
  • style - デフォルト設定(カスタマイズなし)を使用したコンパイル済のBootstrapの非軽量版CSSへのパス

yarn v4.2.1新設

yarnパッケージを使って、Node.jsで動くアプリケーションにBootstrapをインストール:

実行コードyarn add bootstrap

RubyGems

Gemfileに次の行を追加して、Bundler推奨)やRubyGemsのアプリケーションを使って、RubyにBootstrapをインストール:

実行コードgem 'bootstrap', '~> 4.6.2'

Bundlerを使用していない場合は、次のコマンドを実行してgemをインストール:

実行コード$ gem install bootstrap -v 4.6.2

詳細については、Bootstrap Ruby GemのREADMEに記載。

Composer

また、Composerを使用してBootstrapのSassとJavaScriptをインストールして管理することも可能:

実行コードcomposer require twbs/bootstrap:4.6.2

NuGet

.NETで開発する場合は、NuGetを使用してBootstrapのCSSSassとJavaScriptのインストールや管理が可能:

CSSの実行コードPM> Install-Package bootstrap
Sassの実行コードPM> Install-Package bootstrap.sass

【変更履歴】

  • 【v4.0.0】
    • Bowerによるインストールや管理を廃止