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

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

ダウンロード(Download)

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

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

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.js:bootstrap.bundle.js)および軽量版(標準:bootstrap.min.js、含Popper.js:bootstrap.bundle.min.js)のJavaScriptプラグイン

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

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

 

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

ソースSass、JavaScript、およびドキュメントファイルをダウンロードして、プロジェクトのアセットパイプラインでBootstrapをコンパイルする。このオプションを使用するには:

  • CSSをコンパイルするためのSassコンパイラ(LibsassまたはRuby Sassがサポート済み)。
  • CSSベンダープレフィックス用Autoprefixer

構築ツールが必要な場合、それらはBootstrapとそのドキュメントを開発するために組み込まれているが、自分の目的には適していない可能性が高い。

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

 

BootstrapCDN v4.3.1時点

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

HTML<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

コンパイル済みのJavaScriptを使用する場合は、その前にjQueryとPopper.jsのできればCDNバージョンを含めることを忘れないこと。

HTML<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

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

※Popper.jsがバンドルされたJSファイル(bootstrap.bundle.min.js)のCDNバージョンについては、BootstrapCDNに記載(jQueryの後に設置)。

HTML<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

 

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

最も人気のあるパッケージマネージャーのほぼすべてのプロジェクトで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.3.1'

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

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

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

Composer

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

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

NuGet

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

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

【Bootstrap3.xとの変更箇所】

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