Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

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,
      )
    ),