Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
ダウンロード(Download)
Bootstrapをダウンロードして、コンパイルされたCSSやJavaScript、ソースコードを入手したり、npm, RubyGemsなどの好きなパッケージマネージャーに追加する。
コンパイル済みCSSとJSファイル版(Compiled CSS and JS)v4.6.0時点
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.0時点
ソースSass、JavaScript、ドキュメント(解説)ファイルをダウンロードして、プロジェクトのアセットパイプラインでBootstrapをコンパイルする。このオプションを使用するには、次のツールが必要:
- SassソースファイルのCSSファイルコンパイル用Sassコンパイラ
- CSSベンダープレフィックス用Autoprefixer
構築ツールのフルセットが必要な場合、開発向けに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.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
コンパイル済みのJavaScriptを使用していて、Popperを個別に含める場合は、JSの前にPopperを追加する。できればCDNを使用すること。
HTML<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" 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.0'
Bundlerを使用していない場合は、次のコマンドを実行してgemをインストール:
実行コード$ gem install bootstrap -v 4.6.0
詳細については、Bootstrap Ruby GemのREADMEに記載。
Composer
また、Composerを使用してBootstrapのSassとJavaScriptをインストールして管理することも可能:
実行コードcomposer require twbs/bootstrap:4.6.0
NuGet
.NETで開発する場合は、NuGetを使用してBootstrapのCSSやSassとJavaScriptのインストールや管理が可能:
CSSの実行コードPM> Install-Package bootstrap
Sassの実行コードPM> Install-Package bootstrap.sass
【Bootstrap3.xとの変更箇所】
- Bowerによるインストールや管理を廃止