基本のボタンスタイル
ボタンのスタイル | 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>