خلفية
نقل المعنى background-color
وإضافة الزخرفة مع التدرجات.
لون الخلفية
على غرار فئات ألوان النص السياقية ، قم بتعيين خلفية العنصر إلى أي فئة سياقية. لا يتم تعيينcolor
أدوات الخلفية المساعدة ، لذلك في بعض الحالات سترغب في استخدام .text-*
أدوات الألوان المساعدة .
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
تدرج الخلفية
بإضافة .bg-gradient
فصل دراسي ، يتم إضافة تدرج خطي كصورة خلفية إلى الخلفيات. يبدأ هذا التدرج باللون الأبيض شبه الشفاف الذي يتلاشى إلى الأسفل.
هل تحتاج إلى تدرج لوني في CSS المخصص الخاص بك؟ أضف فقط background-image: var(--bs-gradient);
.
ساس
بالإضافة إلى وظائف 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
);
الخلطات
لا يتم استخدام ملفات mixins لإنشاء أدوات مساعدة في الخلفية ، ولكن لدينا بعض المزيجات الإضافية لمواقف أخرى حيث ترغب في إنشاء التدرجات اللونية الخاصة بك.
@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(to right, $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(to bottom, $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(to right, $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, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
واجهة برمجة تطبيقات المرافق
يتم الإعلان عن أدوات الخلفية في واجهة برمجة التطبيقات الخاصة بالمرافق في scss/_utilities.scss
. تعرف على كيفية استخدام واجهة برمجة تطبيقات المرافق.
"background-color": (
property: background-color,
class: bg,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),