رنگ

رنگ

رنگ کی افادیت کے ساتھ متن کو رنگین کریں۔ اگر آپ لنکس کو رنگین کرنا چاہتے ہیں، تو آپ .link-*مددگار کلاسز استعمال کر سکتے ہیں جن کے پاس :hoverاور :focusسٹیٹس ہیں۔

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

دھندلاپن

v5.1.0 تک، ٹیکسٹ کلر یوٹیلیٹیز سی ایس ایس متغیرات کا استعمال کرتے ہوئے Sass کے ساتھ تیار کی جاتی ہیں۔ یہ تالیف اور متحرک الفا شفافیت کی تبدیلیوں کے بغیر حقیقی وقت میں رنگ کی تبدیلیوں کی اجازت دیتا ہے۔

یہ کیسے کام کرتا ہے

ہماری ڈیفالٹ .text-primaryافادیت پر غور کریں۔

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

ہم اپنے --bs-primary(کی قدر کے ساتھ ) CSS متغیر کا RGB ورژن استعمال کرتے ہیں اور الفا شفافیت کے لیے 13, 110, 253دوسرا CSS متغیر منسلک کرتے ہیں ( ایک مقامی CSS متغیر کی بدولت پہلے سے طے شدہ قدر کے ساتھ)۔ اس کا مطلب ہے کہ جب بھی آپ ابھی استعمال کرتے ہیں، آپ کی کمپیوٹیڈ ویلیو ہے ۔ ہر کلاس کے اندر مقامی سی ایس ایس متغیر وراثت کے مسائل سے گریز کرتا ہے لہذا یوٹیلیٹیز کے نیسٹڈ مثالوں میں خود بخود ترمیم شدہ الفا شفافیت نہیں ہوتی ہے۔--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).text-*

مثال

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

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

یا، کسی بھی .text-opacityافادیت میں سے انتخاب کریں:

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

خاصیت

بعض اوقات کسی دوسرے سلیکٹر کی مخصوصیت کی وجہ سے سیاق و سباق کی کلاسوں کا اطلاق نہیں کیا جا سکتا۔ کچھ صورتوں میں، ایک کافی حل یہ ہے کہ آپ اپنے عنصر کے مواد کو <div>مطلوبہ کلاس کے ساتھ ایک یا زیادہ سیمنٹک عنصر میں لپیٹ دیں۔

سس

درج ذیل Sass فعالیت کے علاوہ، رنگوں اور مزید کے لیے ہماری شامل کردہ CSS حسب ضرورت خصوصیات (عرف CSS متغیرات) کے بارے میں پڑھنے پر غور کریں۔

متغیرات

زیادہ تر 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;

گرے اسکیل رنگ بھی دستیاب ہیں، لیکن کوئی بھی افادیت پیدا کرنے کے لیے صرف ایک ذیلی سیٹ استعمال کیا جاتا ہے۔

$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-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

یوٹیلیٹیز API

رنگوں کی افادیت کا اعلان ہماری یوٹیلیٹیز API میں scss/_utilities.scss. یوٹیلیٹیز API کو استعمال کرنے کا طریقہ سیکھیں۔

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),