#最初に
ウェブサイトを製作することになり、苦労した部分を振り返れるように記載していく。
#Bootstrapを導入した理由
Bootstrapを友人に勧められたことで借りた資料を読んでコンテンツの配置調整とレスポンシブへの対応が楽になると判断して導入することを決めた。
また、Bootstrap3ではなくBootstrap4を採用することにしたのは、長期間サイトの管理もする上で、いずれは新しいバージョンに切り替える必要があり、0から始めるため覚える知識量は変わらないと判断したため。
#Bootstrap4の導入
まず、公式サイトと日本語の解説サイトのリンクを載せておく。
特にカラーユーティリティについては、日本語の解説サイトを見ておくことを推奨する。
Bootstrap4(公式サイト)
Bootstrap4移行ガイド
CDNを利用した場合のテンプレートは公式サイトやBootstrap4移行ガイドがあるため省略する。
ソースファイルをダウンロードする場合について理解するまで大変だったため簡単な手順について記載しておく。
-
公式サイトからbootstrapのソースファイルをダウンロードする。
-
jQueryのソースファイルをダウンロードする。
リンク先より「Download the compressed, production jQuery 3.3.1」のリンク先が「jquery-3.3.1.min.js」なので保存する。
jQuery(ダウンロードページ) -
「bootstrap-4.0.0.zip」を解凍し、「dist」内の「css」、「js」をフォルダごと自前サイトのフォルダに保存する。
また、「jquery-3.3.1.min.js」を「js」フォルダ内に保存する。 -
htmlを以下のように記述することでBootstrap4を利用できるようになる。
##参考ソースコード
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>index</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container-fluid">
<main class="row justify-content-center mx-0">
<div class="col jumbotron text-center bg-primary">
<div class="col jumbotron">
<h1>hello,world!</h1>
</div>
<div class="col jumbotron bg-transparent">
<p class="lead font-weight-bold">hello,world!</p>
</div>
</div>
</main>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
※補足
<body>～</body>内でbootstrap.jsを読み込む前にjQuery、popper.jsを読み込む必要があるが、「bootstrap.bundle.min.js」に「popper.js」が含まれているため不要。
2018年4月20日 追記
bootstrap4.1.0が最新バージョンになります。
2019年2月1日 追記
bootstrap4.2.1が最新バージョンになります。
bootstrapを4.1.0から4.2.1へサイトを更新したが、利用している範囲では特に影響はなかった。