陰影ユーティリティ(Shadows)
box-shadowユーティリティを使って要素に影を追加または削除。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。
このページの項目
実例(Examples)
Bootstrapではコンポーネントの影はデフォルトでは無効になっており、$enable-shadows
で有効にもできるが、box-shadow
ユーティリティクラスで影を追加や削除できる。.shadow-none
と3つのデフォルトサイズ(対応する変数が一致)のサポートを含む。
影の種類
影なし:
.shadow-none
(box-shadow: none
)小さめの影:
.shadow-sm
(box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%)
)デフォルトの影:
.shadow
(box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%)
)大きめの影:
.shadow-lg
(box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%)
)設定例
<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">...</div>
【設定】
- 影を入れたいか削除したい要素に
.shadow(-{size})
(上記の「影の種類」から選択)を入れる
Sass v5.0.0-beta3追加
変数(Variables)
デフォルトの設定
scss/_variables.scss 内 box-shadow-variables の設定$box-shadow: 0 .5rem 1rem rgba(var(--#{$prefix}body-color-rgb), .15);
$box-shadow-sm: 0 .125rem .25rem rgba(var(--#{$prefix}body-color-rgb), .075);
$box-shadow-lg: 0 1rem 3rem rgba(var(--#{$prefix}body-color-rgb), .175);
$box-shadow-inset: inset 0 1px 2px rgba(var(--#{$prefix}body-color-rgb), .075);
ユーティリティAPI(Utilities API)
陰影ユーティリティは、scss/_utilities.scss
のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。
デフォルトの設定
scss/_utilities.scss 内 utils-shadow の設定"shadow": (
property: box-shadow,
class: shadow,
values: (
null: $box-shadow,
sm: $box-shadow-sm,
lg: $box-shadow-lg,
none: none,
)
),