पार्श्वभूमि
के माध्यम से अर्थ व्यक्त 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
CSS चरों का उपयोग करके Sass के साथ उपयोगिताएँ उत्पन्न की जाती हैं। यह संकलन और गतिशील अल्फा पारदर्शिता परिवर्तनों के बिना रीयल-टाइम रंग परिवर्तन की अनुमति देता है।
यह काम किस प्रकार करता है
हमारी डिफ़ॉल्ट .bg-success
उपयोगिता पर विचार करें।
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
हम अपने --bs-success
(के मूल्य के साथ 25, 135, 84
) सीएसएस चर के आरजीबी संस्करण का उपयोग करते हैं और अल्फा पारदर्शिता के लिए एक दूसरा सीएसएस चर संलग्न करते हैं --bs-bg-opacity
(स्थानीय सीएसएस चर के लिए डिफ़ॉल्ट मान 1
धन्यवाद के साथ)। इसका मतलब है कि जब भी आप अभी उपयोग करते .bg-success
हैं, तो आपका परिकलित 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;
नक्शा
थीम रंगों को फिर एक Sass मानचित्र में डाल दिया जाता है ताकि हम अपनी उपयोगिताओं, घटक संशोधक, और बहुत कुछ उत्पन्न करने के लिए उन पर लूप कर सकें।
$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");
और पृष्ठभूमि रंग अस्पष्टता उस पर अपने स्वयं के मानचित्र के साथ निर्मित होती है जो उपयोगिताओं एपीआई द्वारा खपत होती है:
$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(--#{$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
. उपयोगिताओं 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
)
),