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-shadow
hulpprogrammaklassen. Bevat ondersteuning voor .shadow-none
en drie standaardformaten (met bijbehorende variabelen).
Geen schaduw
Kleine schaduw
Regelmatige schaduw
Grotere schaduw
<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,
)
),