メインコンテンツへスキップ

陰影ユーティリティ(Shadows)

box-shadowユーティリティを使って要素に影を追加または削除。

目次

実例(Examples)

Bootstrapではコンポーネントの影はデフォルトでは無効になっており、$enable-shadows で有効にすることも可能だが、box-shadow ユーティリティクラスで影を追加や削除可能。.shadow-none と3つのデフォルトサイズ(対応する変数が一致)のサポートを含む。

影の種類
影なし:.shadow-none
小さめの影:.shadow-sm
標準の影:.shadow
大きめの影:.shadow-lg
設定例
<div class="shadow-none p-3 mb-5 bg-light rounded">...</div>
【設定】
  • 影を入れたいか削除したい要素に .shadow(-{size}) を入れる(.shadow(-{size}) は上記「影の種類」から選択)

 

Sass v5.0.0-beta3追加

変数(Variables)

デフォルトの設定
scss/_variables.scss 内 box-shadow-variables の設定$box-shadow:                  0 .5rem 1rem rgba($black, .15);
$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
$box-shadow-lg:               0 1rem 3rem rgba($black, .175);
$box-shadow-inset:            inset 0 1px 2px rgba($black, .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,
			)
		),