Bootstrap

```html: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>&nbsp;<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>
```