छैया छैया

बॉक्स-शैडो उपयोगिताओं वाले तत्वों में छाया जोड़ें या निकालें।

इस पृष्ठ पर

उदाहरण

जबकि घटकों पर छाया बूटस्ट्रैप में डिफ़ॉल्ट रूप से अक्षम होती है और इसके माध्यम से सक्षम की जा सकती है $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);

यूटिलिटीज एपीआई

शैडो यूटिलिटीज को हमारी यूटिलिटीज एपीआई में scss/_utilities.scss. उपयोगिताओं API का उपयोग करना सीखें।

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