Bootstrapメモ

サイト構築

ベースを公式ページからコピペ

公式ページのスターターテンプレートをコピペする

https://getbootstrap.jp/docs/4.5/getting-started/introduction/

サンプルページから必要なデザインをコピペ

公式のサンプルページからデザインを選んで必要なパーツをコピペしてくる

https://getbootstrap.jp/docs/4.3/examples/

margin、padding

mでmargin、pでpaddingとなる。大きさは1~5を指定

<div class="mt-5">上のみ</div>
<div class="mb-5">下のみ</div>
<div class="ml-5">左のみ</div>
<div class="mr-5">右のみ</div>
<div class="mx-5">左右</div>
<div class="my-5">上下</div>

文字色

text-{prefix}で文字色を指定できる。

class="text-success"
class="text-info"

色メモ

中央寄せ

クラスに「mx-auto」を指定する

アコーディオン

//開閉ボタン
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  カードを全部見る
</button>

//リスト
<div class="collapse" id="collapseExample">
  <ul class="list-group">
    <li class="list-group-item">Item #1</li>
    <li class="list-group-item">Item #2</li>
    <li class="list-group-item">Item #3</li>
  </ul>
</div>