勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Bootstrap5系でよく使う要素及びClass名のまとめ記事

   2024/02/24  Bootstrap CSS

サンプルページやダッシュボード系のページを組む際にBootstrapを使うことが多い。しかし、フォームの組み方だったりアラートの表示方法などを覚えておらず、その都度Google検索していた。毎回検索するのは面倒臭い上に時間がかかるのでこのページにまとめてメモ。よく使う項目が出てきたら適宜追記していく。

 

リファレンス

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

 

CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

jQueryは無くても大丈夫だが、当方の環境では大抵一緒に使うため上記の形で呼び出す。

 

共通要素

テーマカラー

8つあるがよく使うのは以下3つ。

  • primary - 青背景に白文字
  • success - 緑背景に白文字
  • danger - 赤背景に白文字

余白の指定方法

「.mt-3」とかの「t」の部分の指定方法。

  • t - top
  • b - bottom
  • s - left
  • e - right
  • x - leftとright両方
  • y - topとbottom両方

 

よく使うレイアウト

card

<body>
    <div class="container">

        <!-- card -->
        <div class="card mt-3 mb-3">
            <div class="card-header">card-header</div>
            <div class="card-body">card-body</div>
        </div>

    </div>
</body>

grid

<body>
    <div class="container">

        <!-- grid  -->
        <div class="container text-center">
            <div class="row">
                <div class="col">
                    Column
                </div>
                <div class="col">
                    Column
                </div>
                <div class="col">
                    Column
                </div>
            </div>
        </div>

    </div>
</body>

 

フォーム関連

基本形

<form enctype="multipart/form-data" method="post">
    <div class="mb-3">
        <label class="form-label fw-bold" for="text">text 
            <span class="badge bg-danger">必須</span>
        </label>
        <input class="form-control" id="text" name="text" type="text" value="">
    </div>
    <div class="mb-3">
        <label class="form-label fw-bold" for="textarea">textarea 
        </label>
        <textarea class="form-control" id="textarea" name="body"></textarea>
    </div>
    <div class="mb-3">
        <label class="form-label fw-bold" for="checkbox">checkbox </label>
        <div class="form-check">
            <input class="form-check-input" id="checkbox1" name="checkbox[]" type="checkbox" value="checkbox1">
            <label class="form-check-label" for="checkbox1">checkbox1 </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" id="checkbox2" name="checkbox[]" type="checkbox" value="checkbox2">
            <label class="form-check-label" for="checkbox2">checkbox2 </label>
        </div>
    </div>
    <div class="mb-3">
        <label class="form-label fw-bold" for="radio">radio 
        </label>
        <div class="form-check">
            <input class="form-check-input" id="radio1" name="radio" type="radio" value="radio1">
            <label class="form-check-label" for="radio1">radio1 </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" id="radio2" name="radio" type="radio" value="radio2">
            <label class="form-check-label" for="radio2">radio2 </label>
        </div>
    </div>
    <div class="mb-3">
        <label class="form-label fw-bold" for="select">select 
        </label>
        <select class="form-control" id="select" name="select">
            <option value="select1">select1</option>
            <option value="select2">select2</option>
            <option value="select3">select3</option>
        </select>
    </div>
    <div class="mb-3">
        <label class="form-label fw-bold" for="file">file 
        </label>
        <input class="form-control" id="file" name="file" type="file">
    </div>
    <div class="d-grid gap-2">
        <a class="btn btn-primary">btn</a>
    </div>
</form>

ボタン部分は普段aタグを使うのでこのような形にした。また、labelタグに関してラジオボタンやチェックボックス以外では意味無いのではと思っていたけど、最近PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」という注意を受けることがあったので基本的には設置しておいた方が無難。

 

パーツ類

alert

<div class="alert alert-【テーマカラー】" role="alert">
    メッセージ
</div>

table

<table class="table table-hover table-bordered">
    <thead class="table-dark">
        <tr>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
    </tbody>
</table>

 - Bootstrap CSS