schaduwen

Voeg schaduwen toe aan elementen of verwijder ze met hulpprogramma's voor vakschaduw.

Op deze pagina

Voorbeelden

Hoewel schaduwen op componenten standaard zijn uitgeschakeld in Bootstrap en kunnen worden ingeschakeld via $enable-shadows, kunt u ook snel een schaduw toevoegen of verwijderen met onze box-shadowhulpprogrammaklassen. Bevat ondersteuning voor .shadow-noneen drie standaardformaten (met bijbehorende variabelen).

Geen schaduw

Kleine schaduw

Regelmatige schaduw

Grotere schaduw

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

Variabelen

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

Hulpprogramma's-API

Schaduwhulpprogramma's worden gedeclareerd in onze hulpprogramma's-API in scss/_utilities.scss. Leer hoe u de hulpprogramma's-API gebruikt.

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