Bootstrap③

グリッドシステム

グリッドオプション

種類	class-prefix(接頭辞)	主な使用用途	画面幅(px)
Extra Small	なし	スマートフォンなど	576px未満
Small	sm	タブレットなど	576px以上
Medium	md	タブレットなど	768px以上
Large	lg	ノートパソコンなど	992px以上
Extra Large	xl	デスクトップPCなど大画面モニタ	1200px以上

想定する画面サイズごとにレイアウトを指定することができる
class名につける文字列を変えることで設定できる

φ(･･
ブレイクポイント
ウィンドウのサイズによって段階的に変わるところ

smを指定した場合576pxを割ると縦並びになる
lg 992px未満になると縦並びのレイアウトになる
グリッドオプションの指定によって縦並びになるブレイクポイントが変わってくる

グリッドオプションの複数設定

 <div class="container">
    <div class="row">
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
      <div class="col-lg-1 col-md-2 orange">1</div>
    </div>
  </div>
  </div>

ブラウザの幅が992px以上の場合はcol-lgの指定が効いて
992pxを割ったところでcol-mdの指定が効くようになり2列になる
ブラウザの幅が768pxを割るとグリッドオプションの指定が外れるので縦並びになる
複数のグリッドオプションによる指定を行うとどの端末で見ても
ユーザーに見やすいレイアウトを作ることができる!!

グリッドのネスト

Nesting

  <div class="col-sm-9 orange">
      Level 1: 9
      <div class="row">
        <div class="col-sm-8 orange">Level 2: 8</div>
        <div class="col-sm-4 orange">Level 2: 4</div>
      </div>
    </div>
    <div class="col-sm-3 orange">
      Level 1: 3
    </div>
  </div>

9つ分のリフトをさらに12分割して8対4で分けている

ジャンボトロンとフォーム

• ジャンボトロン
  ジャンボトロン（jumbotron）は、WEBサイトのトップ見出しのデザイン

Bootstrap ver4ではclassとして存在していたが、ver5では削除された
他のユーテリティクラスを使用したジャンボトロンの作り方を使用

 <div class="bg-light p-3 p-sm-5 my-4 rounded">
    <h1>Jumbotron</h1>
    <p>はじめてのBootatrapへようこそ</p>
    <button class="btn btn-primary btn-lg">Sign Up</button>
  </div>

• ログインフォーム

Forms
https://getbootstrap.com/docs/5.0/forms/overview/

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

簡単にログインフォームが作れる
実務でも必要に応じてカスタマイズして使うことが多い
CSSを記述する項数を大幅に削減できる!

---

フォトギャラリーの制作まで終わらせたかったけどあと半分のところでギブ、、！
明日もなるべく残業せず早く帰って掃除と勉強！
今日はジムも行けたから💮満足
筋トレとプログラミングって似てるよね
パワー💪🏻