Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
Check
in English

Varjud

Lisage või eemaldage elementidele varje kastivarju utiliitidega.

Sellel lehel

Näited

Kuigi komponentide varjud on Bootstrapis vaikimisi keelatud ja neid saab lubada rakenduse kaudu $enable-shadows, saate varju kiiresti lisada või eemaldada ka meie box-shadowutiliidiklasside abil. Sisaldab tuge .shadow-nonekolmele vaikesuurusele (millel on sobitamiseks seotud muutujad).

Ei mingit varju
Väike vari
Tavaline vari
Suurem vari
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

Muutujad

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

Utiliidide API

Variutiliidid on deklareeritud meie utiliitide API-s scss/_utilities.scss. Siit saate teada, kuidas utiliitide API-t kasutada.

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