رنگ
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,
)
)
),