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

رنگ

colorمٹھی بھر کلر یوٹیلیٹی کلاسز کے ذریعے معنی بیان کریں۔ ہوور اسٹیٹس کے ساتھ اسٹائل لنکس کے لیے بھی سپورٹ شامل ہے۔

رنگ

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

.text-primary

متن ثانوی

.text-کامیابی

.text-خطرہ

متن کی وارننگ

متن کی معلومات

.text-light

متن سیاہ

.text-body

متن خاموش

متن-سفید

.text-black-50

.text-white-50

<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>
فرسودگی:.text-opacity-* ٹیکسٹ یوٹیلیٹیز کے لیے یوٹیلیٹیز اور CSS متغیرات کے اضافے کے ساتھ ، .text-black-50اور .text-white-50v5.1.0 کے مطابق فرسودہ ہیں۔ انہیں v6.0.0 میں ہٹا دیا جائے گا۔
معاون ٹکنالوجی کے معنی پہنچانا

معنی کو شامل کرنے کے لیے رنگ کا استعمال صرف ایک بصری اشارہ فراہم کرتا ہے، جو کہ معاون ٹیکنالوجیز - جیسے کہ اسکرین ریڈرز کے صارفین تک نہیں پہنچایا جائے گا۔ اس بات کو یقینی بنائیں کہ رنگ سے ظاہر کی گئی معلومات یا تو خود مواد سے واضح ہے (مثلاً مرئی متن)، یا متبادل ذرائع سے شامل کی گئی ہے، جیسے کہ .visually-hiddenکلاس کے ساتھ چھپا ہوا اضافی متن۔

دھندلاپن

v5.1.0 میں شامل کیا گیا۔

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حسب ضرورت اسٹائلز یا ان لائن اسٹائلز کے ذریعے اوور رائڈ کریں۔

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

یہ پہلے سے طے شدہ بنیادی متن ہے۔
یہ 75% دھندلاپن کا بنیادی متن ہے۔
یہ 50% دھندلاپن والا بنیادی متن ہے۔
یہ 25% دھندلاپن کا بنیادی متن ہے۔
<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
      )
    ),