باکگراوند
مانا لە ڕێگەی 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);
.
ناڕوونی
لە v5.1.0 زیاد کراوەلە v5.1.0 ەوە، background-color
سوودمەندیەکان بە Sass بە بەکارهێنانی گۆڕاوەکانی CSS دروست دەکرێن. ئەمەش ڕێگە بە گۆڕینی ڕەنگ لە کاتی ڕاستەقینەدا دەدات بەبێ کۆمپایلکردن و گۆڕینی شەفافیەتی ئەلفا داینامیکی.
چۆن کاردەکات
.bg-success
سوودمەندی پێشوەختەی ئێمە لەبەرچاو بگرە .
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
ئێمە وەشانی RGB ی گۆڕاوەی CSS ی خۆمان بەکاردەهێنین --bs-success
(بە بەهای 25, 135, 84
) و گۆڕاوەی دووەمی CSSمان هاوپێچ دەکەین، --bs-bg-opacity
, بۆ شەفافیەتی ئەلفا (بە بەهای پێشوەختە 1
بەهۆی گۆڕاوێکی CSSی ناوخۆیی). واتە هەر کاتێک ئێستا بەکاری بهێنیت ، بەهای .bg-success
حیسابکراوەکەت بریتییە لە . گۆڕاوەی CSSی ناوخۆیی لە ناو هەر پۆلێکدا خۆی لە کێشەکانی میرات دەپارێزێت بۆیە نموونە هێلانەییەکانی سوودمەندەکان بە شێوەیەکی ئۆتۆماتیکی شەفافیەتی ئەلفا دەستکاریکراویان نییە.color
rgba(25, 135, 84, 1)
.bg-*
نموونە
بۆ گۆڕینی ئەو ناڕوونییە، --bs-bg-opacity
لە ڕێگەی ستایلە تایبەتەکان یان ستایلە ناو هێڵەکانەوە سەرپێچی بکە.
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>
یان، لە هەریەکێک لە .bg-opacity
خزمەتگوزارییەکان هەڵبژێرە:
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
ساس
جگە لەم کاراییانەی خوارەوەی 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;
نەخشە
پاشان ڕەنگەکانی تەوەر دەخرێنە ناو نەخشەی ساسەوە بۆ ئەوەی بتوانین بەسەریاندا لوپ بکەین بۆ دروستکردنی سوودمەندییەکانمان، دەستکاریکەری پێکهاتەکان و زۆر شتی تر.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
هەروەها ڕەنگی خۆڵەمێشی وەک نەخشەی ساس بەردەستە. ئەم نەخشەیە بۆ دروستکردنی هیچ سوودمەندێک بەکارناهێنرێت.
$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
);
ڕەنگەکانی RGB لە نەخشەیەکی جیاوازی Sass دروست دەکرێن:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
وە ناڕوونی ڕەنگی پاشبنەما لەسەر ئەوە بنیات دەنرێت بە نەخشەی تایبەت بە خۆیان کە لەلایەن API سوودمەندییەکانەوە بەکاردەهێنرێت:
$utilities-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
)
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
میکسینەکان
هیچ میکسینێک بەکارناهێنرێت بۆ دروستکردنی سوودمەندییەکانی پاشبنەمامان , بەڵام ئێمە هەندێک میکسین زیادەمان هەیە بۆ بارودۆخەکانی تر کە حەز دەکەیت گرادێنتەکانی خۆت دروست بکەیت.
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$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);
}
API ی سوودمەندیەکان
سوودمەندییەکانی پاشبنەما لە APIی خزمەتگوزارییەکانمان لە scss/_utilities.scss
. فێربە چۆن API ی سوودمەندیەکان بەکاربهێنیت.
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),