グラデーションを有効にする

Bootstrap4の $enable-gradients を有効にした場合に変更される主なCSSスタイル。

$enable-gradients を有効にする方法

1. ツールのセットアップを実行。
2. Bootstrap4のソースファイルの /scss/_variables.scss の Options の項目にある
   $enable-gradients: false !default; を $enable-gradients: true !default; に変更。
3. コマンドラインから npm run test を実行。
4. dist/ 内のファイル全てが更新されるので、css/bootstrap.css または css/bootstrap.min.css を自分のサイトのものと差し替える。

アラートの色

ボタンの色

Primary Secondary Success Danger Warning Info Light Dark

ボタングループの色

ドロップダウンのメニューのアクティブと無効の色

カスタムチェックボックスのチェック部分

カスタムチェックボックスのボタン部分

カスタムレンジ入力のつまみ部分

レンジの実例

カスタムファイル選択のボタンの色

.bg-gradient-{themecolor} ユーティリティクラスが追加

---