【Bootstrap】ダウンロードと基本的な使い方を解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、12年目エンジニアです。

この記事では、 Bootstrapの

• ダウンロードするやり方
• 基本的な使い方

を解説します。

前提条件：実行環境について

実行環境は以下の通りです。

なお、ここで紹介している情報は2023年9月8日現在の情報です。
日にちが経過している場合、異なる可能性がありますので、予めご了承下さい。

Bootstrapをダウンロードするやり方を解説

まずBootstrapをダウンロードするやり方を解説します。

以下の公式サイトに行き、【ダウンロード】リンクを選択します。
Bootstrap

【コンパイルされたCSSとJS】という項目にある、【ダウンロード】ボタンを押します。

ダウンロードファイル内にzipファイルがあります。（ファイル名は「bootstrap-5.3.0-dist.zip」）
zipファイルの上で右クリックし、表示されるドロップダウンリストの中から【すべて展開】を選択します。

【圧縮（ZIP形式）フォルダーの展開】という画面が表示されます。
zipファイルの展開先を選択できます。
展開先を変更したい場合は、【参照】ボタンを押して展開したい場所を選択してください。
この記事では、デフォルトのままで進めます。
【展開】ボタンを押します。

zipファイルが展開されて、以下のエクスプローラーが表示されます。
【bootstrap-5.3.0-dist】ディレクトリを選択します。

中には

• css
• js

という2つのディレクトリがあります。
これらのディレクトリを適切な場所に格納して、適切なファイルを読み込めば、Bootstrapを使うことができます。

Bootstrapの基本的な使い方を解説

次にBootstrapの基本的な使い方を解説を解説します。

Bootstrapのバージョン4までだとBootstrapを使うために、jQueryをダウンロードもしくはCDNから読み込む必要がありました。
しかしバージョン5になって読み込む必要がなくなりました。
公式の発表内容については、こちらの記事をご参考ください。
※英語で記載されています。

Bootstrapを使うためにはダウンロードしたファイルの中の

• bootstrap-5.3.0-dist\css配下のbootstrap.cssまたはbootstrap.min.css
• bootstrap-5.3.0-dist\js配下bootstrap.jsまたはbootstrap.min.js

を読み込む必要があります。
私は読み込むスピードが速い「.min」がついているファイルをおすすめします。
「.min」がついているファイルとついていないファイルの違いについては、こちらの解説記事をご参考ください。

この記事では読み込むファイルを

• bootstrap.min.css
• bootstrap.min.js

として解説を進めます。

では、Bootstrapを読み込んで使ってみます。
ディレクトリ構成は以下の画像のようになっている、とします。

JavascriptSampleディレクトリ内にダウンロードして展開したbootstrap-5.3.0-distディレクトリをそのまま格納しています。

HTMLサンプルプログラムは以下です。

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

headタグ内の

は、すべてのデバイスに対して適切なレンダリングとタッチズームを保証するために必要なものなので、設定しています。

では、作成したHTMLをブラウザで開きます。
画像のように表示されれば、正常にBootstrapの読み込みができています。

まとめ：Bootstrapをダウンロードしてみよう

以上がBootstrapのダウンロードと基本的な使い方の解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ