مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

پس منظر

معنی کے ذریعے بیان background-colorکریں اور میلان کے ساتھ سجاوٹ شامل کریں۔

پس منظر کا رنگ

سیاق و سباق کے متن کے رنگ کی کلاسوں کی طرح، کسی عنصر کے پس منظر کو کسی بھی سیاق و سباق کی کلاس میں سیٹ کریں۔ پس منظر کی افادیتیں سیٹ نہیں ہوتیں ، اس لیے کچھ معاملات میں آپ color.text-* کلر یوٹیلیٹیز استعمال کرنا چاہیں گے ۔

.bg-پرائمری
.bg-ثانوی
.bg-کامیابی
.bg-خطرہ
.bg-انتباہ
.bg-info
.bg-light
بی جی ڈارک
.bg-body
.bg-سفید
.bg-شفاف
html
<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);۔

.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-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(کی قدر کے ساتھ ) CSS متغیر کا RGB ورژن استعمال کرتے ہیں اور الفا شفافیت کے لیے 25, 135, 84دوسرا CSS متغیر منسلک کرتے ہیں ( ایک مقامی CSS متغیر کی بدولت پہلے سے طے شدہ قدر کے ساتھ)۔ اس کا مطلب ہے کہ جب بھی آپ ابھی استعمال کرتے ہیں، آپ کی کمپیوٹیڈ ویلیو ہے ۔ ہر کلاس کے اندر مقامی سی ایس ایس متغیر وراثت کے مسائل سے گریز کرتا ہے لہذا یوٹیلیٹیز کے نیسٹڈ مثالوں میں خود بخود ترمیم شدہ الفا شفافیت نہیں ہوتی ہے۔--bs-bg-opacity1.bg-successcolorrgba(25, 135, 84, 1).bg-*

مثال

اس دھندلاپن کو تبدیل کرنے کے لیے، --bs-bg-opacityحسب ضرورت اسٹائلز یا ان لائن اسٹائلز کے ذریعے اوور رائڈ کریں۔

یہ پہلے سے طے شدہ کامیابی کا پس منظر ہے۔
یہ 50% مبہم کامیابی کا پس منظر ہے۔
html
<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افادیت میں سے انتخاب کریں:

یہ پہلے سے طے شدہ کامیابی کا پس منظر ہے۔
یہ 75% مبہم کامیابی کا پس منظر ہے۔
یہ 50% مبہم کامیابی کا پس منظر ہے۔
یہ 25% مبہم کامیابی کا پس منظر ہے۔
یہ 10% مبہم کامیابی کا پس منظر ہے۔
html
<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 رنگ الگ ساس نقشہ سے تیار کیے گئے ہیں:

$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
      )
    ),