Прескокнете до главната содржина Прескокнете на навигацијата со документи
in English

Сенки

Додавајте или отстранувајте сенки на елементи со помошни алатки за сенка.

На оваа страница

Примери

Додека сенките на компонентите се стандардно оневозможени во Bootstrap и може да се овозможат преку $enable-shadows, исто така можете брзо да додавате или отстраните сенка со нашите box-shadowкласи за помошни програми. Вклучува поддршка за .shadow-noneи три стандардни големини (кои имаат поврзани променливи за совпаѓање).

Без сенка
Мала сенка
Редовна сенка
Поголема сенка
<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>

Сас

Променливи

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

Utilities API

Услужните програми во сенка се декларирани во нашите API за комунални услуги во scss/_utilities.scss. Научете како да ги користите Utilities API.

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