ਪਰਛਾਵੇਂ

ਬਾਕਸ-ਸ਼ੈਡੋ ਉਪਯੋਗਤਾਵਾਂ ਵਾਲੇ ਤੱਤਾਂ ਵਿੱਚ ਸ਼ੈਡੋ ਸ਼ਾਮਲ ਕਰੋ ਜਾਂ ਹਟਾਓ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਉਦਾਹਰਨਾਂ

ਜਦੋਂ ਕਿ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕੰਪੋਨੈਂਟਾਂ 'ਤੇ ਸ਼ੈਡੋ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਅਸਮਰੱਥ ਹੁੰਦੇ ਹਨ ਅਤੇ ਇਸਨੂੰ ਦੁਆਰਾ ਸਮਰੱਥ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ $enable-shadows, ਤੁਸੀਂ ਸਾਡੀ box-shadowਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਇੱਕ ਸ਼ੈਡੋ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਜੋੜ ਜਾਂ ਹਟਾ ਸਕਦੇ ਹੋ। ਲਈ ਸਮਰਥਨ .shadow-noneਅਤੇ ਤਿੰਨ ਡਿਫੌਲਟ ਆਕਾਰ (ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਮੇਲ ਕਰਨ ਲਈ ਸੰਬੰਧਿਤ ਵੇਰੀਏਬਲ ਹਨ) ਸ਼ਾਮਲ ਹਨ।

ਕੋਈ ਪਰਛਾਵਾਂ ਨਹੀਂ

ਛੋਟਾ ਪਰਛਾਵਾਂ

ਨਿਯਮਤ ਸ਼ੈਡੋ

ਵੱਡਾ ਪਰਛਾਵਾਂ

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>

ਸੱਸ

ਵੇਰੀਏਬਲ

$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

ਸ਼ੈਡੋ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਸਾਡੀ ਉਪਯੋਗਤਾਵਾਂ API ਵਿੱਚ ਘੋਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ scss/_utilities.scss। ਯੂਟਿਲਿਟੀਜ਼ API ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ ਬਾਰੇ ਜਾਣੋ।

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