Передайте смысл с помощью background-color и добавьте украшения с помощью градиентов.
Фоновый цвет
Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибутcolor, так что в некоторых случаях вам понадобится утилиты .text-*.
<divclass="p-3 mb-2 bg-primary text-white">.bg-primary</div><divclass="p-3 mb-2 bg-secondary text-white">.bg-secondary</div><divclass="p-3 mb-2 bg-success text-white">.bg-success</div><divclass="p-3 mb-2 bg-danger text-white">.bg-danger</div><divclass="p-3 mb-2 bg-warning text-dark">.bg-warning</div><divclass="p-3 mb-2 bg-info text-dark">.bg-info</div><divclass="p-3 mb-2 bg-light text-dark">.bg-light</div><divclass="p-3 mb-2 bg-dark text-white">.bg-dark</div><divclass="p-3 mb-2 bg-body text-dark">.bg-body</div><divclass="p-3 mb-2 bg-white text-dark">.bg-white</div><divclass="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Фоновый градиент
При добавлении класса .bg-gradient к фону добавляется линейный градиент в качестве фонового изображения. Этот градиент начинается с полупрозрачного белого цвета, который постепенно исчезает к низу.
Вам нужен градиент в вашем собственном CSS? Просто добавьте background-image: var(--bs-gradient);.
Sass
В дополнение к следующей функциональности Sass, рассмотрите возможность чтения о наших включенных настраиваемых свойствах CSS (также известных как переменные CSS) для цветов и многого другого.
Переменные
Большинство утилит background-color генерируются цветами нашей темы, переназначенными из переменных нашей общей цветовой палитры.
$blue:#0d6efd;$indigo:#6610f2;$purple:#6f42c1;$pink:#d63384;$red:#dc3545;$orange:#fd7e14;$yellow:#ffc107;$green:#198754;$teal:#20c997;$cyan:#0dcaf0;$primary:$blue;$secondary:$gray-600;$success:$green;$info:$cyan;$warning:$yellow;$danger:$red;$light:$gray-100;$dark:$gray-900;$gradient:linear-gradient(180deg,rgba($white,.15),rgba($white,0));Также доступны оттенки серого, но для создания каких-либо утилит используется только подмножество.
$white:#fff;$gray-100:#f8f9fa;$gray-200:#e9ecef;$gray-300:#dee2e6;$gray-400:#ced4da;$gray-500:#adb5bd;$gray-600:#6c757d;$gray-700:#495057;$gray-800:#343a40;$gray-900:#212529;$black:#000;Карта
Затем цвета темы помещаются в карту Sass, чтобы мы могли перебирать их, чтобы сгенерировать наши утилиты, модификаторы компонентов и многое другое.
$theme-colors:("primary":$primary,"secondary":$secondary,"success":$success,"info":$info,"warning":$warning,"danger":$danger,"light":$light,"dark":$dark);Цвета в градациях серого также доступны в виде карты Sass. Эта карта не используется для создания каких-либо утилит.
$grays:("100":$gray-100,"200":$gray-200,"300":$gray-300,"400":$gray-400,"500":$gray-500,"600":$gray-600,"700":$gray-700,"800":$gray-800,"900":$gray-900);Миксины
Никакие миксины не используются для создания наших фоновых утилит, но у нас есть некоторые дополнительные миксины для других ситуаций, когда Вы хотите создать свои собственные градиенты.
@mixin gradient-bg($color:null){background-color:$color;@if$enable-gradients{background-image:var(--#{$variable-prefix}gradient);}}// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color:$gray-700,$end-color:$gray-800,$start-percent:0%,$end-percent:100%){background-image:linear-gradient(toright,$start-color$start-percent,$end-color$end-percent);}// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color:$gray-700,$end-color:$gray-800,$start-percent:null,$end-percent:null){background-image:linear-gradient(tobottom,$start-color$start-percent,$end-color$end-percent);}@mixin gradient-directional($start-color:$gray-700,$end-color:$gray-800,$deg:45deg){background-image:linear-gradient($deg,$start-color,$end-color);}@mixin gradient-x-three-colors($start-color:$blue,$mid-color:$purple,$color-stop:50%,$end-color:$red){background-image:linear-gradient(toright,$start-color,$mid-color$color-stop,$end-color);}@mixin gradient-y-three-colors($start-color:$blue,$mid-color:$purple,$color-stop:50%,$end-color:$red){background-image:linear-gradient($start-color,$mid-color$color-stop,$end-color);}@mixin gradient-radial($inner-color:$gray-700,$outer-color:$gray-800){background-image:radial-gradient(circle,$inner-color,$outer-color);}@mixin gradient-striped($color:rgba($white,.15),$angle:45deg){background-image:linear-gradient($angle,$color25%,transparent25%,transparent50%,$color50%,$color75%,transparent75%,transparent);}Утилиты API
Фоновые утилиты объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать утилиты API.
"background-color":(property:background-color,class:bg,values:map-merge($theme-colors,("body":$body-bg,"white":$white,"transparent":transparent))),