Bilili ya bilili

Bakisa to longola ba shadow na ba éléments na ba utilitaires box-shadow.

Na lokasa oyo

Bandakisa

Alors que ba ombres sur les composants ezali désactivé par défaut na Bootstrap mpe ekoki kozala activé via $enable-shadows, okoki mpe kobakisa to kolongola noki ombre na box-shadowba classes na biso ya utilitaire. Esangisi lisungi mpo na .shadow-nonempe bonene misato ya liboso (oyo ezali na ba variables oyo esangisi mpo na kokokana).

Elili ezali te

Elili ya moke

Elili ya mbala na mbala

Elili ya monene koleka

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>

Sass oyo azali

Ba variables oyo ezali

$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 ya ba utilitaires

Ba utilitaires ya ombre esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.

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