bootstrap
<!doctype html>
<html lang="ja">
<head>
<!--
1. 概要
BootstrapとはCSSを使わずレスポンシブサイトを作れるライブラリ。
classの値にBootstrapの定数を設定することで各機能を利用できる。
2. グリッド
横幅を12カラム構成にすること。
まずclass="container"のブロックを作り、
その中に親要素にclass="row"、その子要素にclass="col"をつけたブロックを作りグリッド化する。
以下がその例。
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
3. ブレイクポイント
レスポンシブに切り替わる画面サイズをブレイクポイントという。
bootstrapでは以下のようにブレイクポイントの定数が決まっている。
sm: 576px以上
md: 768px以上
lg: 992ox以上
xl: 1200px以上
なし: すべての幅
4. カラム
class="col"を指定するとカラムになる。
構文: col-AA-BB
AAの部分がブレイクポイントでBBの部分がカラム数になる。
AA以上になったらBBのカラム数にするという意味。
【例】
col-sm-6: 幅が576px以上は6カラムにする
col-md-12: 幅が768px以上は12カラムにする
col-12: すべての幅で12カラムにする
5. padding
構文: p◇-△
pはpaddingの略。
◇は位置。a: 上下左右、y: 上下、x: 左右、t: top、b: bottom、l: left、r: right の7種類がある。
△はpx
【例】
pa-1: 上下左右のpaddingを1pxにする
py-1: 上下のpaddingを1pxにする
px-1: 左右のpaddingを1pxにする
pt-2: 上のpaddingを2pxにする
pb-2: 下のpaddingを2pxにする
pr-2: 右のpaddingを2pxにする
pl-2: 左のpaddingを2pxにする
6. margin
構文: m◇-△
mはmarginの略。◇と△の使い方はpaddingと同じ。
【例】
ma-1: 上下左右のmarginを1pxにする
my-2: 上下のmarginを2pxにする
7. 位置
文字の位置: text-centerをつける
子ブロックの水平位置: 親ブロックにjustify-content-centerをつける
子ブロックの垂直位置: 親ブロックにalign-items-centerをつける
ブロック自身の位置: ブロックにmx-autoをつける
8. 背景色
構文: bg-色定数
【例】
bg-primary: 背景色をprimaryにする。デフォルトでは青
bg-secondary: 背景色をsecondaryにする。デフォルトでは灰色
9. 文字色
構文: text-色定数
【例】
text-white: 文字色を白にする。
text-secondary: 文字色をsecondaryにする。
-->
<title>bootstrap</title>
<!-- 10. bootstrapのcharset,viewport,cssの設定 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- 11. bootstrapアイコンのcss -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<style>
.td-r {
border-right-style: solid;
border-right-width: 1px;
border-right-color: #fff;
}
.td-b {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #fff;
}
</style>
</head>
<body>
<!-- 12. class="jumbotron"を指定する。 jumbotronとはサイトのトップ見出しのデザイン -->
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>jumbotron</h1>
</div>
<!-- 13.
class="navbar"でナビゲーションをアクティブにする
navbar-expand-md: 画面サイズがmd以下になったらハンバーガーメニューを出す -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<!-- 14. class="navbar-brand" ロゴを設定する。 -->
<span class="navbar-brand">ロゴ</span>
<!--
15. ハンバーガーメニューボタン
class="navbar-toggler" ハンバーガーメニューにする
data-toggle="collapse" メニューのの開閉機能をアクティブにする
data-target: メニューのidを指定する
-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav1">
<span class="navbar-toggler-icon"></span>
</button>
<!--
16. メニュー内容
class="collapse navbar-collapse"とidを設定する
-->
<div class="collapse navbar-collapse" id="nav1">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">メニュー1</a>
<a class="nav-item nav-link" href="#">メニュー2</a>
</div>
</div>
</nav>
<!-- 17. class="container" グリッドを使う場合これをつける -->
<div class="container">
<!-- 18. rowとcolをつかったグリッド。
my-4: marginの上下を4pxにする
align-items-center: 子要素を垂直の中央に配置
text-center: 文字を中央に配置
bg-primary: 背景色をprimaryに設定
text-white: 文字色を白に設定 -->
<div class="row my-4 align-items-center text-center bg-primary text-white">
<!-- 19.
col: カラムにする。カラム数は自動調整
py-2: paddingの上下を2pxにする
-->
<div class="col py-2 td-r">col</div>
<div class="col py-2">col</div>
</div>
<div class="row my-4 align-items-center text-center bg-secondary text-white">
<!-- 20. col-md-3: カラムにする。ブレイクポイントがmdになる。なのでmd以上の画面サイズは3カラムにし、mdより小さい画面サイズは12カラムになる。-->
<div class="col-md-3 py-2 td-r td-b">col-md-3</div>
<div class="col-md-9 py-2 td-r td-b">col-md-9</div>
</div>
<!-- 21. my-4: marginの上下を4pxに設定。 -->
<div class="row my-4 align-items-center text-center bg-success text-white">
<div class="col-md-6">
<!-- 22. rowのネスト -->
<div class="row">
<div class="col py-2 td-r td-b">col</div>
<div class="col py-2 td-r td-b">col</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<!-- 23. col-4: すべての画面サイズで4カラムにする -->
<div class="col-4 py-2 td-r td-b">col-4</div>
<div class="col-8 py-2 td-r td-b">col-8</div>
</div>
</div>
</div>
<!-- 24. アイコン: 事前にCDNでアイコンのcssを読み込んでおく -->
<div class="my-3 text-center">
<i class="fas fa-cloud"></i>
<i class="fas fa-coffee"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</div>
<!-- 25. バッジ: class="badge" でバッジをアクティブにする -->
<div class="my-3 text-center">
<div class="badge badge-success">badge Success</div> <div class="badge badge-danger">badge Danger</div>
</div>
<!-- 26. ツールチップ: data-toggle="tooltip"でツールチップをアクティブにし、titleにツールチップの内容を記述する -->
<div class="py-2 my-3 mx-auto text-center bg-warning text-white" data-toggle="tooltip" title="ツールチップ本文" style="width: 200px">ツールチップ</div>
<!-- 27. モーダルボタン: data-toggle="modal"でモーダルをアクティブにし、data-targetでモーダルレイアウトのidを指定する
d-block: ブロック要素に変換、 mx-auto: 要素自身を中央に配置 -->
<button type="button" class="btn btn-info d-block mx-auto" data-toggle="modal" data-target="#testModal">モーダル</button>
<!-- 28. モーダルレイアウト。class="modal"やclass="modal-dialog"などclassの値が決まっている。idの設定は必須 -->
<div class="modal" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4><div class="modal-title">モーダルタイトル</div></h4>
</div>
<div class="modal-body">
<label>モーダル本文</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<!-- 29. フォーム: class="form-control"をつけるとアクティブになる。readonlyをつけると非活性になる -->
<div class="my-4"><input type="text" class="form-control mx-auto" placeholder="readonly" readonly style="width: 300px"></div>
<!-- 30. バリデーション: バリデーション成功の場合valid-feedbackがアクティブになる -->
<input type="text" class="form-control mx-auto" required placeholder="必須入力" style="width: 300px" id="input1">
<div class="valid-feedback text-center">OK</div>
<!-- 31. Bootstrapに必要なjsの読み込み -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 32. バリデーション制御のjs -->
<script>
$(function() {
$('#input1').keyup(function(e) {
const i = $('#input1');
const val = i[0].checkValidity() ? 'is-valid': 'is-invalid';
e.preventDefault();
e.stopPropagation();
i.removeClass('is-valid is-invalid');
i.addClass(val);
});
});</script>
<!-- 33. ツールチップのjsの設定 -->
<script>$('[data-toggle="tooltip"]').tooltip();</script>
</body>
</html>