زمینه
معنی را از طریق 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
);
مخلوط ها
هیچ میکسی برای تولید ابزارهای پسزمینه ما استفاده نمیشود ، اما ما میکسهای اضافی را برای موقعیتهای دیگری که میخواهید شیبهای خود را ایجاد کنید، داریم.
@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);
}
Utilities API
ابزارهای پس زمینه در API ابزارهای ما در اعلان شده اند scss/_utilities.scss
. با نحوه استفاده از Utilities API آشنا شوید.
"background-color": (
property: background-color,
class: bg,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),