Bootstrapの導入のしかた

始める前の注意
Bootstrapはアップデートが頻繁に行われ、仕様が変わりやすいです。
以下に記した内容と異なる場合がありますので、臨機応変に対応してください。

BootstrapはレスポンシブWebデザインを効率的に構築できるフレームワークです。HTMLにBootstrapのクラスを指定するだけで予めBootstrapが用意しているCSSを読み取り簡単にレイアウトを組むことができます。

BootstrapのJSとCSSをダウンロード

まずはBootstrapの(日本語)サイトへ行き、「ダウンロード」をクリックします。
(2つありますが同じリンク先なので、どちらもでも構いません)

https://getbootstrap.jp/

次にダウンロードページのCompiled CSS and JS にある「ダウンロード」をクリックするとzipデータがダウンロードされます。

zipデータを解凍しフォルダーの中を確認してください。

CSSフォルダのbootstrap.cssを使う

ここで使うCSSはbootstrap.cssのみです。

JSフォルダのbootstrap.jsを使う

ここで使うJSはbootstrap.jsのみです。

jQueryをダウンロード

Bootstrapを導入しただけでは機能しないので、jQueryも導入します。
jQueryはJavascriptの作業を簡単にしたJavaScriptのライブラリです。
さっそくjQueryのサイトへ行ってみましょう。

https://jquery.com/

右側にある「Download jQuery」をクリックします。

次に赤枠で囲んだテキストリンクを確認します。

「Download the compressed, production jQuery 3.5.1」

現在(2020/7/13)のテキストリンクは上記のようになっていますが、最後の数字部分はバージョンによって変わります。

このテキストリンクを右クリックし「リンク先を別名で保存」で保存します。
(Macの場合)

jQueryの保存のしかた

フォルダ内の構造

BootstrapとjQueryを配置する場所は下図になります。
あくまで例なのでサイト構造の環境に合わせて調整してください。

bootstrapのフォルダ内構造

Bootstrapを機能させる

HTMLに必要な要素を<head>~</head>の中に記述する

Bootstrapを機能させたいHTMLにハイライト表示にしている以下の5、8、10、11行目を記述します。
(9行目が必要な場合は書いてください)

ここでは分かりやすいようにBootstrapの導入に必要な要素を中心に書いています。
他の要素は省略している部分があるので、その他の要素は適宜、記述してください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>タイトル</title>
<meta name="description" content="サイト説明文">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>

上記の必要な要素を簡単に説明します。
5行目はレスポンシブとして機能させるための要素になります。

<meta name="viewport" content="width=device-width,initial-scale=1">

8行目はダウンロードしてきたbootstrap.cssを読み込むための記述です。
9行目はbootstrap.cssより優先して読み込ませたいcssを記述します。
例えばstyle.cssの場合は以下のようにbootstrap.cssの後に記述します。

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">

10行目はダウンロードしてきたjquery-***.jsのある場所を記述します。
11行目はjqueryより優先して読み込ませたいbootstrap.jsを後に記述します。

<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

ここまでが導入の流れになります。
実際に使う場合は以下の記事を参考にしてください。