پس منظر
ذريعي معنيٰ بيان 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
ڪرڻ سان، پس منظر ۾ پس منظر واري تصوير جي طور تي هڪ لڪير گريڊ شامل ڪيو ويو آهي. هي گريڊيئنٽ هڪ نيم شفاف سفيد سان شروع ٿئي ٿو جيڪو هيٺ لهي وڃي ٿو.
ڇا توھان کي پنھنجي ڪسٽم سي ايس ايس ۾ گريجوئيٽ جي ضرورت آھي؟ بس شامل ڪريو 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;
نقشو
موضوع جا رنگ پوءِ ساس نقشي ۾ رکيا ويندا آھن تنھنڪري اسان انھن تي لوپ ڪري سگھون ٿا پنھنجيون يوٽيلٽيز، جزن جي تبديلين ۽ وڌيڪ پيدا ڪرڻ لاءِ.
$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
);
ملائيندڙ
اسان جي پس منظر جي افاديت پيدا ڪرڻ لاءِ ڪي به ميڪسين استعمال نه ڪيا ويا آهن ، پر اسان وٽ موجود آهن ڪجهه اضافي ميڪسينس ٻين حالتن لاءِ جتي توهان چاهيو ٿا ته توهان پنهنجو گريڊينٽ ٺاهي.
@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);
}
يوٽيلٽيز 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
)
)
),