bootstrap4.css
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
color: #fff;
background-color: #545b62;
border-color: #4e555b;
}
bootstrap4.css
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
■ドロップダウン:dropdown-menu:コンポーネント:メニュー項目に無効やアクティブの状態を設定する
<!-- ボタングループ -->
<div class="btn-group">
<!-- 切り替えボタン -->
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item disabled" href="#">メニュー02(無効)</a>
<a class="dropdown-item active" href="#">メニュー03(アクティブ)</a>
</div>
</div>
■ボタン:button:コンポーネント:ラジオボタンをボタンに変更する
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" checked autocomplete="off">ラジオ1
</label>
<label class="btn btn-secondary">
<input type="radio" autocomplete="off">ラジオ2
</label>
<label class="btn btn-secondary">
<input type="radio" autocomplete="off">ラジオ3
</label>
</div>
■ボタン:button:コンポーネント:チェックボックスをボタン変更する data-toggle=buttons
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off">チェック1
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off">チェック2
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off">チェック3
</label>
</div>