基本のボタンスタイル
| ボタンのスタイル | btn |
| ボタンのカラー | btn-{カラーユーティリティ} |
| アウトラインボタン | btn-outline{カラーユーティリティ} |
| 大きいボタン | btn-lg |
| 小さめボタン | btn-sm |
| ボタンにリンクスタイル | btn-link |
<a class="btn btn-primary"><a class="btn btn-secondary"><a class="btn btn-success"><a class="btn btn-info"><a class="btn btn-warning"><a class="btn btn-danger"><a class="btn btn-light"><a class="btn btn-dark">アウトラインボタン【btn-outline-{カラーユーティリティ}】
<a class="btn btn-outline-primary"><a class="btn btn-outline-secondary"><a class="btn btn-outline-success"><a class="btn btn-outline-info"><a class="btn btn-outline-warning"><a class="btn btn-outline-danger"><a class="btn btn-outline-light"><a class="btn btn-outline-dark">ボタンのリンクスタイルと大きさ変更【btn-link】【btn-{大きさ}】
リンクになる「p」要素
<p class="btn btn-link"><a class="btn btn-lg"><a class="btn btn-sm">アクティブ化、非アクティブ化【active】【disabled】
<a class="btn btn-primary active">
<a class="btn btn-primary">
<a class="btn btn-primary disabled">トグルボタン【data-toggle=”button”】【aria-pressed=”true”】
<button class="btn btn-primary active" data-toggle="button" aria-pressed="true">
<button class="btn btn-primary" data-toggle="button" aria-pressed="false">【data-toggle】はクラスではなく、属性なことに注意。
【aria-pressed】は視覚補助の属性で、「true」で「on」状態、「false」で「off」状態。
ボタンを丸くする【rounded】【rounded-0】【rounded-circle】【badge-pill】
<a class="btn rounded"><a class="btn rounded-0"><a class="btn rounded-circle"><a class="btn rounded-circle">ボタンのグループ化【チェックボックス】【ラジオボタン】
ボタン群を【btn-group】クラスと【role=”button”】属性を持つタグの中にいれてグループ化。
【role=”button”】はクラスではなく属性なので注意。
<div class="btn-group" role="button">
<button type="button" class="btn btn-info">button</button>
<button type="button" class="btn btn-info">button</button>
</div>ボタングループを縦に並べるには【btn-group-vertical】をつける。
<div class="btn-group-vertical" role="buttons">
<button type="button" class="btn btn-info">button</button>
<button type="button" class="btn btn-info">button</button>
</div><div class="btn-group" data-toggle="buttons">
<div class="btn btn-secondary">
<input type="checkbox" id="check1" class="form-input">
<label for="check1">check1</label>
</div>
<div class="btn btn-info">
<input type="checkbox" id="check2" class="form-input">
<label for="check2">check2</label>
</div>
<div class="btn btn-warning">
<input type="checkbox" id="check3" class="form-input">
<label for="check3">check3</label>
</div>
</div><div class="btn-group" data-toggle="buttons">
<div class="btn btn-secondary">
<input type="radio" id="radio1" class="form-input">
<label for="radio1">radio1</label>
</div>
<div class="btn btn-info">
<input type="radio" id="radio2" class="form-input">
<label for="radio2">radio2</label>
</div>
<div class="btn btn-warning">
<input type="radio" id="radio3" class="form-input">
<label for="radio3">radio3</label>
</div>
</div>
