سائے

باکس شیڈو یوٹیلیٹیز والے عناصر میں شیڈو شامل کریں یا ہٹا دیں۔

اس صفحہ پر

مثالیں

جب کہ بوٹسٹریپ میں اجزاء پر سائے ڈیفالٹ کے ذریعے غیر فعال ہوتے ہیں اور اسے کے ذریعے فعال کیا جا سکتا ہے ، آپ ہماری یوٹیلیٹی کلاسز $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,
      )
    ),