Bootstrap5 インストール

Bootstrapはフレームワークの一つで、デザインが美しく、機能的なウェブサイトを効率よく制作することが可能です。その最新版であるBootstrap5のインストール方法について詳しく説明していきます。

Bootstrap5を利用するためには、まずBootstrapのCSSとJavaScriptファイルをHTML文書にリンクします。CDNを使用する方法とNPMを使用する方法の2つが主流です。

BootstrapのCDNを使用する

最も簡単な方法は、Bootstrapの公式CDN(Content Delivery Network)からリンクを貼り付けることです。これにより、最新版のBootstrapが常に自動的に提供されます。

以下のリンクをHTMLファイルの適切な場所に挿入します。

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

npmを使ってインストールする

npm(Node Package Manager)は、JavaScriptのパッケージマネージャで、Bootstrapをプロジェクトにインストールするのに便利なツールです。

まず、npmをインストールし、以下のコマンドを実行します。

npm install bootstrap

これにより、node_modulesディレクトリにBootstrapがダウンロードされます。自分のプロジェクトでBootstrapを使用するためには、適切なファイルを参照するようにリンクを設定する必要があります。

ダウンロードと自己ホスト

もしプロジェクトで特定のBootstrapバージョンを使い続けたい場合、または自己ホストを希望する場合は、Bootstrapの公式ウェブサイトから直接ダウンロードすることもできます。

ダウンロード

コンパイルされた CSS、JavaScript、ソースコード、npm や RubyGems といった好きなパッケージマネージャで Bootstrap をインストールできます。

getbootstrap.jp

bootstrap.bundle.jsとbootstrap.bundle.min.jsの違い

その違いはファイルの大きさと可読性です。JavaScriptと同じですね。

• bootstrap.bundle.jsは未圧縮バージョンのファイルで、人間が読むことが可能です。つまり、スペース、インデント、改行などが全てそのまま残されています。これはデバッグや学習のために使われます。
• bootstrap.bundle.min.jsは圧縮（minified）バージョンのファイルで、全てのスペース、インデント、改行が削除されています。また、変数名は短く（通常一文字）に変更されています。これによりファイルサイズが小さくなり、サイトのロード時間が短縮されます。これは本番環境で使用されます。