ਪਰਛਾਵੇਂ

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

ਇਸ ਪੰਨੇ 'ਤੇ

ਉਦਾਹਰਨਾਂ

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

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

ਛੋਟਾ ਪਰਛਾਵਾਂ

ਨਿਯਮਤ ਪਰਛਾਵਾਂ

ਵੱਡਾ ਪਰਛਾਵਾਂ

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