Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
Check
in English

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,
      )
    ),