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-shadow
cov chav kawm siv hluav taws xob. suav nrog kev txhawb nqa rau .shadow-none
thiab 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
<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,
)
),