Vɔvɔliwo

Tsɔ vɔvɔliwo kpe ɖe nusiwo ŋu aɖaka-vɔvɔli ƒe dɔwɔnuwo le ŋu alo ɖe wo ɖa.

Le axa sia dzi

Kpɔɖeŋuwo

Togbɔ be vɔvɔliwo le akpawo dzi nye nuwɔametɔwo le gɔmedzedzea me le Bootstrap me eye woateŋu awɔ dɔ to $enable-shadows, àteŋu atsɔ vɔvɔli aɖe akpe ɖe eŋu kaba alo aɖee ɖa hã kaba kple míaƒe box-shadowdɔwɔnu ƒe hatsotsowo. Kpekpeɖeŋunana .shadow-nonekple lolome etɔ̃ siwo woɖo ɖi (siwo me tɔtrɔ siwo do ƒome kplii le be woasɔ) hã le eme.

Vɔvɔli aɖeke meli o

Vɔvɔli sue aɖe

Vɔvɔli si nɔa anyi edziedzi

Vɔvɔli si lolo wu

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 ƒe nyawo

Nusiwo trɔna

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

Dɔwɔnuwo ƒe API

Woɖe gbeƒã vɔvɔli ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.

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