رنگ
بوٹسٹریپ کو ایک وسیع کلر سسٹم کے ذریعے سپورٹ کیا جاتا ہے جو ہمارے سٹائل اور اجزاء کو تھیم کرتا ہے۔ یہ کسی بھی پروجیکٹ کے لیے زیادہ جامع تخصیص اور توسیع کو قابل بناتا ہے۔
تھیم کے رنگ
ہم رنگ سکیمیں بنانے کے لیے ایک چھوٹا رنگ پیلیٹ بنانے کے لیے تمام رنگوں کا سب سیٹ استعمال کرتے ہیں، جو بوٹسٹریپ کی scss/_variables.scss
فائل میں ساس متغیر اور ساس نقشہ کے طور پر بھی دستیاب ہے۔
یہ تمام رنگ ساس نقشہ کے طور پر دستیاب ہیں $theme-colors
۔
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
ان رنگوں کو کیسے تبدیل کیا جائے اس کے لیے ہمارے ساس نقشے اور لوپس کی دستاویزات دیکھیں ۔
تمام رنگ
scss/_variables.scss
تمام بوٹسٹریپ رنگ ساس متغیرات اور فائل میں ایک ساس نقشہ کے طور پر دستیاب ہیں ۔ فائل کے سائز میں اضافے سے بچنے کے لیے، ہم ان میں سے ہر ایک متغیر کے لیے متن یا پس منظر کے رنگ کی کلاسیں نہیں بناتے ہیں۔ اس کے بجائے، ہم تھیم پیلیٹ کے لیے ان رنگوں کا سب سیٹ منتخب کرتے ہیں ۔
رنگوں کو اپنی مرضی کے مطابق بناتے وقت متضاد تناسب کی نگرانی کرنا یقینی بنائیں۔ جیسا کہ ذیل میں دکھایا گیا ہے، ہم نے ہر ایک اہم رنگ میں تین متضاد تناسب شامل کیے ہیں- ایک سویچ کے موجودہ رنگوں کے لیے، ایک سفید کے مقابلے میں، اور ایک سیاہ کے مقابلے میں۔
ساس پر نوٹس
Sass پروگرام کے لحاظ سے متغیرات پیدا نہیں کر سکتا، اس لیے ہم نے دستی طور پر ہر ٹنٹ اور شیڈ کے لیے متغیرات بنائے۔ ہم مڈ پوائنٹ ویلیو (مثلاً، $blue-500
) بتاتے ہیں اور ساس کے کلر فنکشن کے ذریعے اپنے رنگوں کو ٹنٹ (ہلکا) یا سایہ (گہرا) کرنے کے لیے حسب ضرورت کلر فنکشن استعمال کرتے ہیں mix()
۔
استعمال mix()
کرنا ایک جیسا نہیں ہے lighten()
اور darken()
— سابقہ مخصوص رنگ کو سفید یا سیاہ کے ساتھ ملا دیتا ہے، جب کہ مؤخر الذکر صرف ہر رنگ کی ہلکی پن کی قدر کو ایڈجسٹ کرتا ہے۔ نتیجہ رنگوں کا ایک بہت زیادہ مکمل مجموعہ ہے، جیسا کہ اس CodePen ڈیمو میں دکھایا گیا ہے ۔
ہمارے tint-color()
اور shade-color()
فنکشنز mix()
ہمارے متغیر کے ساتھ استعمال ہوتے ہیں $theme-color-interval
، جو ہمارے تیار کردہ ہر مخلوط رنگ کے لیے ایک مرحلہ وار فی صد قدر بتاتا ہے۔ scss/_functions.scss
مکمل سورس کوڈ کے لیے اور scss/_variables.scss
فائلیں دیکھیں ۔
رنگین ساس نقشے۔
بوٹسٹریپ کے ماخذ Sass فائلوں میں تین نقشے شامل ہیں جو آپ کو رنگوں کی فہرست اور ان کی ہیکس قدروں کو تیزی سے اور آسانی سے لوپ کرنے میں مدد کرتے ہیں۔
$colors
ہمارے تمام دستیاب بیس (500
) رنگوں کی فہرست$theme-colors
تمام لفظی طور پر نامزد تھیم کے رنگوں کی فہرست (نیچے دکھایا گیا ہے)$grays
بھوری رنگ کے تمام رنگوں اور رنگوں کی فہرست
کے اندر scss/_variables.scss
، آپ کو بوٹسٹریپ کے رنگ متغیرات اور ساس کا نقشہ مل جائے گا۔ $colors
یہاں ساس نقشہ کی ایک مثال ہے :
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
نقشے میں اقدار کو شامل کریں، ہٹائیں یا ان میں ترمیم کریں تاکہ یہ اپ ڈیٹ کیا جا سکے کہ وہ بہت سے دوسرے اجزاء میں کیسے استعمال ہوتے ہیں۔ بدقسمتی سے اس وقت، ہر جزو اس ساس نقشے کو استعمال نہیں کرتا ہے۔ مستقبل کے اپ ڈیٹس اس میں بہتری لانے کی کوشش کریں گے۔ تب تک، ${color}
متغیرات اور اس ساس نقشہ کو استعمال کرنے کا منصوبہ بنائیں۔
مثال
یہاں یہ ہے کہ آپ ان کو اپنے ساس میں کیسے استعمال کرسکتے ہیں:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
رنگ اور پس منظر کی افادیت کی کلاسیں رنگ کی قدروں کو ترتیب دینے color
اور background-color
استعمال کرنے کے لیے بھی دستیاب ہیں۔500