💪

Bootstrap③

2022/12/07に公開約3,000字

グリッドシステム

グリッドオプション

種類 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を記述する項数を大幅に削減できる!


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

Discussion

ログインするとコメントできます