【Bootstrap4】初期設定と簡単な例
Bootstrapを導入して表示デバイスあった画面構成をする方法をまとめました。
ここでは導入から初期設定までの手順、それから簡単なサンプルまでを作成してみます。
なお、公式ページは以下のリンクになります。サンプルが豊富に用意されているのでとても参考になります。
事前準備
ライブラリの配置
以下手順でBootstrapライブラリを配置します。
- 以下のサイトのDownload
https://getbootstrap.com/ - ダウンロードページの「Compiled CSS and JS」をダウンロードする
- zipファイルを解凍したらjs、cssのディレクトリをプロジェクトのpublicディレクトリの任意の場所へ配置する (今回はpublic/bootstrap/ 以下に配置)
ヘッダー定義
Bootstrapを適用する画面のheaderタグ内に以下を記載します。
<!-- Viewportの指定 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrapのcss, js読み込み -->
<link href="/bootstrap/css/style.css" rel="stylesheet" type="text/css"></link>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="/bootstrap/js/bootstrap.min.js"></script>
metaタグのviewportはPC、スマホ、タブレットなど異なるデバイスでも、デバイス自体の横幅に合わせてコンテンツを合わせて表示しますよ、という設定です。
linkとscriptは配置したライブラリを読みます。静的なサイトであればjsは特に必要ありません。
実装
画像をcontainerに入れてレスポンシブに対応する
まずは単純な例で、画像をデバイスにあった幅で表示し、更に画像の角に丸みを付けてみます。
<div class="container">
<img src="/bootstrap/curry.jpg" class="rounded img-fluid"/>
</div>
画面イメージ
使用しているクラスについて
- container … 画面の幅に応じて段階的に横幅が変化する
- rounded … 画像の角を丸くする
- img-fluid … 表示デバイスの画面幅に合わせて画像を表示する
応用
Bootstrapにより画面レイアウトが変わったら、適用するCSSも変更したい場面があるときの方法です。
CSS
@media only screen and (max-width: 991px) {
/* 幅991px以下 */
body{
background: #0FF;
}
}
@media only screen and (max-width: 766px) {
/* 幅766px以下 */
body{
background: #F0F;
}
}
@media only screen and (max-width: 575px) {
/* 幅575px以下 */
body{
background: #FF0;
}
}
media only screen … はメディアクエリと言ってCSS3で追加になった記述方法で、デバイスにあった書き分けを行うことができる。
ここでは max-width を指定して、それぞれの画面幅で専用のCSSをオーバーライドしている。
また、max-widthはmin-widthと組み合わせて使うことが可能です。その場合はmin-widthからmax-widthの間だけ適用されることになります。
動作確認
画面幅が1024pxのとき
画面幅が870pxのとき
画面幅が625pxのとき
画面幅が470pxのとき
エラー
ブラウザのコンソールでエラー
フロント側で以下のエラーが出た場合
util.js:55 Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:55
at bootstrap.min.js:6
at bootstrap.min.js:6
原因
bootstrap.min.js が jquery.min.js に依存しているので、読み込む順番を後にすればOK
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
備考
Chromeの開発者モード
Chromeで画面を開いた時 F12 を押すと開発者モードに切り替えることができます。開発者モードではPC表示やスマホ表示の切り替えや、フロント側のエラーなどが確認できるので、ここで確認しながら実装すると良いです。
コメント
コメントを投稿