ボタン
ボタン
.btnと.btn-primaryなどを指定する。
.btn-linkはテキストリンクとなる。
.btn-lg, btn-smで大きさを変更可能。
.btn-outline-primaryなどを指定するとアウトラインボタンとなる。 (背景なし、ボーダーあり)
<button type="button" class="btn btn-primary btn-lg">btn-primary</button>
<button type="button" class="btn btn-link">btn-link</button>
<button type="button" class="btn btn-outline-info btn-sm">btn-outline-info</button>
<!-- inputタグやaタグでも使用可能 -->ボタングループ
.btn-groupで複数の.btnを囲むとグループ化が可能。
<div class="btn-group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
</div>画像
- .img-fluid: レスポンシブ
- .img-thumbnail: 枠線
- .float-start .float-end: 左右寄せ
bootstrap4では.float-left, float-rightだったが、bootstrap5では.float-start .float-endに変わった。 - .rounded: 角が丸くなる。
- .rounded-circleで円、.rounded-pillでカプセル型になる。
<img src="./sample.jpg" class="img-fluid">
<img src="./sample2.jpg" class="img-thumbnail float-start">
<img src="./sample2.jpg" class="img-thumbnail float-end">
<img src="./sample2.jpg" class="rounded">
<img src="./sample2.jpg" class="rounded-circle">スピナー
スピナー
.spinner-borderまたは.spinner-growを指定する。
.text-primaryなどを一緒に指定することで色を変更可能。
.spinner-border-smまたは.spinner-grow-smを一緒に指定することで、大きさを変更可能。
<div class="spinner-border"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border spinner-border-sm text-primary"></div>
<div class="spinner-grow text-danger"></div>ボタンの中のスピナー
.btnの中に.spinner-borderと.spinner-border-smを指定したspanを含める。
(グロースピナーの場合は.spinner-growと.spinner-grow-sm)
「読み込み中」などの場合は、.btnにdisabledをつけるのが一般的。
<button class="btn btn-primary" disabled>
読み込み中...<span class="spinner-border spinner-border-sm"></span>
</button>プログレスバー
.progressの中に.progress-barを含める。
- .progressにstyle=”height: 10px”などで高さを指定。
- .progressに.bg-primaryなどで背景色を変更可能。
- .progress-barに.bg-primaryなどでバーの色を変更可能。
- .progress-barに.w-25やstyle=”width: 100px”などで幅を指定。
- .progress-barに.progress-bar-stripedでストライプ。
- .progress-bar-stripedに.progress-bar-animatedでストライプのアニメーション化。
<div class="progress bg-secondary mb-2" style="height: 40px">
<div class="progress-bar w-25">25%</div>
</div>
<div class="progress">
<div class="progress-bar bg-success w-50 progress-bar-striped">50%</div>
<div class="progress-bar bg-info w-25 progress-bar-animated">25%</div>
</div>ディスプレイ
- .d-inline
- .d-block
- .d-none
- .d-inline-block
- .d-flex
ブレークポイントの指定も可能。
例えば.d-nodeと.d-md-blockで768px以上の場合のみ表示となる。
他にも.d-table, .d-table-cell, .d-table-row, .d-inline-flexなどがある。
<span class="d-block bg-warning">d-inline</span>
<div class="d-md-none bg-info">d-md-none</div>フォーム
フォーム
divに.form-groupを指定する。
.form-groupの中にlabelや.form-controlのinput, select, textareaなどを含める。
.form-controlに.form-control-lgまたは.form-control-smでサイズを変更可能。
ファイル入力はbootstrap4では.form-control-fileだったが、bootstrap5では他の部品と同様に.form-controlを指定するようになった。
<input type="file" class="form-control">
<div class="form-group">
<label for="name">名前</label>
<input type="text" class="form-control" id="name">
<label for="kana">フリガナ</label>
<input type="text" class="form-control form-control-lg" id="kana">
</label>
</div>チェックボックス・ラジオボタン
.form-groupの代わりに、選択肢毎に.form-checkを指定したdivを記述する。
横並びにする場合は.form-check-inlineも指定する。
labelには.form-check-label、inputには.form-check-inputを指定する。
<div class="form-check">
<input type="checkbox" class="form-check-input" id="agreement">
<label for="agreement" class="form-check-label">同意する</label>
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="orange">
<label for="orange" class="form-check-label">オレンジ</label>
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="apple">
<label for="apple" class="form-check-label">りんご</label>
</label>
</div>グリッドシステム
.rowが.col-sm-6などと一緒に指定されることが多い。
bootstrap4では.rowよりもマージンが小さい.form-rowがあったが、bootstrap5では削除された。
<div class="container">
<div class="row g-3">
<div class="form-group col-sm-6">
<label for="hoge1">hoge1</label>
<input type="text" class="form-control" id="hoge1">
</div>
<div class="form-group col-sm-6">
<label for="hoge2">hoge2</label>
<input type="text" class="form-control" id="hoge2">
</div>
</div>
</div>インプットグループ
.input-groupのdivの中に.input-group-textのspanを含める。
.input-groupに.input-group-lgまたは.input-group-smでサイズを変更可能。
bootstrap4ではspanの外側に.input-group-prependまたは.input-group-appendが必要だったが、bootstrap5では削除された。
<div class="input-group input-group-lg">
<span class="input-group-text">@</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<span class="input-group-text"><input type="checkbox" class="form-check-input"></span>
<input type="text" class="form-control">
</div>aバッジ
.badgeと.bg-primaryなどを指定する。
bootstrap4では.badge-primaryなどだったが、bootstrap5では.bg-primaryなどに変わった。
.rounded-pillも指定するとカプセル型になる。
aタグに指定すると、マウスオーバーで変化するリンクを手早く作成することができる。
<span class="badge bg-primary rounded-pill">aaaa</span>
<button class="btn btn-primary">通知 <span class="badge bg-info">10</span></button>
<a href="#">お知らせ <span class="badge bg-dark">4</span></a>
<a href="#" class="badge bg-primary">リンク</a>
コメント