مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
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>
معاون ٹکنالوجی کے معنی پہنچانا

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

خاصیت

بعض اوقات کسی دوسرے سلیکٹر کی مخصوصیت کی وجہ سے سیاق و سباق کی کلاسوں کا اطلاق نہیں کیا جا سکتا۔ کچھ صورتوں میں، ایک کافی حل یہ ہے کہ آپ اپنے عنصر کے مواد کو <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
);

یوٹیلیٹیز API

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

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),