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

رنگ

بوٹسٹریپ کو ایک وسیع کلر سسٹم کے ذریعے سپورٹ کیا جاتا ہے جو ہمارے سٹائل اور اجزاء کو تھیم کرتا ہے۔ یہ کسی بھی پروجیکٹ کے لیے زیادہ جامع تخصیص اور توسیع کو قابل بناتا ہے۔

تھیم کے رنگ

ہم رنگ سکیمیں بنانے کے لیے ایک چھوٹا رنگ پیلیٹ بنانے کے لیے تمام رنگوں کا سب سیٹ استعمال کرتے ہیں، جو بوٹسٹریپ کی 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تمام بوٹسٹریپ رنگ ساس متغیرات اور فائل میں ایک ساس نقشہ کے طور پر دستیاب ہیں ۔ فائل کے سائز میں اضافے سے بچنے کے لیے، ہم ان میں سے ہر ایک متغیر کے لیے متن یا پس منظر کے رنگ کی کلاسیں نہیں بناتے ہیں۔ اس کے بجائے، ہم تھیم پیلیٹ کے لیے ان رنگوں کا سب سیٹ منتخب کرتے ہیں ۔

رنگوں کو اپنی مرضی کے مطابق بناتے وقت متضاد تناسب کی نگرانی کرنا یقینی بنائیں۔ جیسا کہ ذیل میں دکھایا گیا ہے، ہم نے ہر ایک اہم رنگ میں تین متضاد تناسب شامل کیے ہیں- ایک سویچ کے موجودہ رنگوں کے لیے، ایک سفید کے مقابلے میں، اور ایک سیاہ کے مقابلے میں۔

$ نیلا#0d6efd
نیلا $100
$200 نیلا
نیلا-300 ڈالر
$نیلا-400
$نیلا-500
$blue-600
نیلا-700 ڈالر
$blue-800
نیلا $900
$indigo#6610f2
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$جامنی#6f42c1
جامنی -100 ڈالر
جامنی -200 ڈالر
جامنی -300 ڈالر
جامنی -400 ڈالر
جامنی -500 ڈالر
جامنی -600 ڈالر
جامنی -700 ڈالر
جامنی -800 ڈالر
جامنی $900
گلابی#d63384
$pink-100
گلابی-200 ڈالر
$pink-300
$pink-400
گلابی-500 ڈالر
$pink-600
$pink-700
$pink-800
$pink-900
$سرخ#dc3545
$100 سرخ
سرخ -200 ڈالر
$300 سرخ
سرخ-400 ڈالر
$red-500
$red-600
سرخ-700 ڈالر
$red-800
$red-900
$نارنج#fd7e14
نارنجی -100 ڈالر
نارنجی -200 ڈالر
نارنجی -300 ڈالر
نارنجی -400 ڈالر
$نارنگی-500
$نارنگی-600
$نارنگی-700
$نارنگی-800
$نارنگی-900
$پیلا#ffc107
$پیلا-100
$پیلا-200
$پیلا-300
$پیلا-400
$پیلا-500
$پیلا-600
$پیلا-700
$پیلا-800
$پیلا-900
$سبز#198754
$سبز-100
$سبز-200
$سبز-300
$گرین-400
$سبز-500
$سبز-600
$سبز-700
$سبز-800
$سبز-900
نیلی#20c997
$teal-100
$teal-200
Teal-300 ڈالر
$teal-400
Teal-500 ڈالر
$teal-600
$teal-700
$teal-800
$teal-900
$cyan#0dcaf0
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$گرے-500#adb5bd
$گرے -100
گرے-200 ڈالر
گرے-300 ڈالر
گرے-400 ڈالر
$گرے-500
گرے-600 ڈالر
گرے-700 ڈالر
$گرے-800
$گرے-900
$ سیاہ#000
$سفید#fff

ساس پر نوٹس

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