始める前の注意
Bootstrapはアップデートが頻繁に行われ、仕様が変わりやすいです。
以下に記した内容と異なる場合がありますので、臨機応変に対応してください。
BootstrapはレスポンシブWebデザインを効率的に構築できるフレームワークです。HTMLにBootstrapのクラスを指定するだけで予めBootstrapが用意しているCSSを読み取り簡単にレイアウトを組むことができます。
BootstrapのJSとCSSをダウンロード
まずはBootstrapの(日本語)サイトへ行き、「ダウンロード」をクリックします。
(２つありますが同じリンク先なので、どちらもでも構いません)
次にダウンロードページの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のサイトへ行ってみましょう。
右側にある「Download jQuery」をクリックします。
次に赤枠で囲んだテキストリンクを確認します。
「Download the compressed, production jQuery 3.5.1」
現在(2020/7/13)のテキストリンクは上記のようになっていますが、最後の数字部分はバージョンによって変わります。
このテキストリンクを右クリックし「リンク先を別名で保存」で保存します。
（Macの場合）
フォルダ内の構造
BootstrapとjQueryを配置する場所は下図になります。
あくまで例なのでサイト構造の環境に合わせて調整してください。
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>ここまでが導入の流れになります。
実際に使う場合は以下の記事を参考にしてください。