Duab ntxoov ntxoo

Ntxiv lossis tshem cov duab ntxoov ntxoo rau cov ntsiab lus nrog lub thawv-duab ntxoov ntxoo.

Ntawm nplooj ntawv no

Piv txwv

Thaum cov duab ntxoov ntxoo ntawm cov khoom raug cuam tshuam los ntawm lub neej ntawd hauv Bootstrap thiab tuaj yeem qhib los ntawm $enable-shadows, koj tuaj yeem ntxiv lossis tshem tawm cov duab ntxoov ntxoo nrog peb box-shadowcov chav kawm siv hluav taws xob. suav nrog kev txhawb nqa rau .shadow-nonethiab peb qhov loj me me (uas muaj qhov sib txawv sib txawv kom phim).

Tsis muaj duab ntxoov ntxoo

Tus duab ntxoov ntxoo me

Cov duab ntxoov ntxoo tsis tu ncua

Duab ntxoov ntxoo loj dua

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

Hloov pauv

$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);

Utilities API

Duab ntxoov ntxoo cov nqi hluav taws xob tau tshaj tawm hauv peb cov khoom siv hluav taws xob API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.

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