Awọn ojiji

Ṣafikun tabi yọ awọn ojiji kuro si awọn eroja pẹlu awọn ohun elo ojiji apoti.

Lori iwe yi

Awọn apẹẹrẹ

Lakoko ti awọn ojiji lori awọn paati jẹ alaabo nipasẹ aiyipada ni Bootstrap ati pe o le ṣiṣẹ nipasẹ $enable-shadows, o tun le yara ṣafikun tabi yọ ojiji kan kuro pẹlu box-shadowawọn kilasi IwUlO wa. Pẹlu atilẹyin fun .shadow-noneati awọn iwọn aiyipada mẹta (eyiti o ni awọn oniyipada to somọ lati baramu).

Ko si ojiji

Ojiji kekere

Ojiji deede

Ojiji nla

html

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>

Sass

Awọn oniyipada

$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 Awọn ohun elo

Awọn ohun elo ojiji ni a kede ni API awọn ohun elo wa ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

    "shadow": (
      property: box-shadow,
      class: shadow,
      values: (
        null: $box-shadow,
        sm: $box-shadow-sm,
        lg: $box-shadow-lg,
        none: none,
      )
    ),