Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

gölgeler

Kutu gölge yardımcı programları ile öğelere gölgeler ekleyin veya kaldırın.

Örnekler

Bileşenlerdeki gölgeler Bootstrap'ta varsayılan olarak devre dışı bırakılmış ve aracılığıyla etkinleştirilebilse de, yardımcı program sınıflarımızla $enable-shadowshızlı bir şekilde gölge ekleyebilir veya kaldırabilirsiniz . box-shadowDestek .shadow-noneve üç varsayılan boyut (eşleşecek ilişkili değişkenlere sahip) içerir.

Gölge yok
Küçük gölge
Normal gölge
Daha büyük gölge
<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>

küstah

Değişkenler

$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);

Yardımcı Programlar API'sı

Gölge yardımcı programları, yardımcı program API'mizde scss/_utilities.scss. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.

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