رنگ
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-50
v5.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-opacity
1
.text-primary
color
rgba(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
)
),