BootstrapでCardレイアウトを使う

BootstrapはCSSのフロントエンドライブラリ。
前回に引き続き学習記録をまとめておきます。

１．Cards

　Bootstrapでcardと検索してきて、コンポーネントをコピペすれば簡単に、コース一覧などをレイアウトできる。Bootstrap4.5の場合、コピーした内容のsvgタグを消しておいて、imgタグで画像を読み込めば、テキストの上に画像を貼り付けられる。

コピペした直後．．．

<div class="card" style="width: 18rem;">
  <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

svgタグを消して．．．

<div class="card" style="width: 18rem;">
  <img src="" alt="" class="card-img-top">
 <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

imgタグの"card-img-top"クラスは、画像をカードの上に表示するクラスになります。
divクラス"card"の中に、imgクラスcard-img-topとdivクラス"card-body"があるという構成になっています。

２，VSコードのショートカット

　Bootstrapに関係ないが、選択した範囲をもう一回クリックすると、その範囲をマウスでつかむことができ、divタグの中に入れることができた。
　shift + alt + F　でコードを整形できる。

３，List

　componentのlistを使えばあっという間に作ることができます。

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

　ここで注意すべき点は、listの背景色を変えるときは、bgクラスではなく、list-group-itemクラスを使うという点です。背景色を淡い水色にしようとしても、bg-primaryは濃い青色しかありません。(ver5から淡い水色も追加されています)。見つけるまでなかなか苦戦しました．．．

４，Form

　Formを横並びにしたいときは、form gridを使うと便利！姓と名をそれぞれ入力するときはとても便利です。

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>