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

سی ایس ایس متغیرات

بوٹسٹریپ کی سی ایس ایس حسب ضرورت خصوصیات کو تیز اور مستقبل کے حوالے سے ڈیزائن اور ترقی کے لیے استعمال کریں۔

بوٹسٹریپ اپنے مرتب کردہ سی ایس ایس میں بہت سی سی ایس ایس کسٹم پراپرٹیز (متغیرات) کو شامل کرتا ہے ریئل ٹائم کسٹمائزیشن کے لیے بغیر Sass کو دوبارہ کمپائل کرنے کی ضرورت ہے۔ یہ آپ کے براؤزر کے انسپکٹر، کوڈ سینڈ باکس، یا عام پروٹو ٹائپنگ میں کام کرتے وقت ہمارے تھیم کے رنگ، بریک پوائنٹس، اور بنیادی فونٹ اسٹیک جیسی عام استعمال شدہ اقدار تک آسان رسائی فراہم کرتے ہیں۔

bs-فریق ثالث CSS کے ساتھ تنازعات سے بچنے کے لیے ہماری تمام حسب ضرورت خصوصیات کے ساتھ سابقہ ​​لگایا گیا ہے۔

روٹ متغیرات

یہاں وہ متغیرات ہیں جن کو ہم شامل کرتے ہیں (نوٹ کریں کہ :rootمطلوبہ ہے) جو بوٹسٹریپ کے سی ایس ایس کو لوڈ ہونے پر کہیں بھی رسائی حاصل کی جا سکتی ہے۔ وہ ہماری _root.scssفائل میں موجود ہیں اور ہماری مرتب شدہ ڈسٹ فائلوں میں شامل ہیں۔

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

اجزاء کے متغیرات

ہم مختلف اجزاء کے لیے مقامی متغیرات کے طور پر حسب ضرورت خصوصیات کا استعمال بھی شروع کر رہے ہیں۔ اس طرح ہم اپنے مرتب کردہ سی ایس ایس کو کم کر سکتے ہیں، اس بات کو یقینی بنا سکتے ہیں کہ نیسٹڈ ٹیبلز جیسی جگہوں پر سٹائلز وراثت میں نہیں مل رہے ہیں، اور ساس کمپیلیشن کے بعد بوٹسٹریپ کے اجزاء کو کچھ بنیادی ریسٹائلنگ اور توسیع دینے کی اجازت دے سکتے ہیں۔

کچھ بصیرت کے لیے ہمارے ٹیبل دستاویزات پر ایک نظر ڈالیں کہ ہم کس طرح CSS متغیرات استعمال کر رہے ہیں ۔

ہم اپنے گرڈز میں سی ایس ایس متغیرات بھی استعمال کر رہے ہیں—بنیادی طور پر گٹر کے لیے—مستقبل میں مزید اجزاء کے استعمال کے ساتھ۔

مثالیں

سی ایس ایس متغیر Sass کے متغیرات کے لیے اسی طرح کی لچک پیش کرتے ہیں، لیکن براؤزر کو پیش کیے جانے سے پہلے تالیف کی ضرورت کے بغیر۔ مثال کے طور پر، یہاں ہم اپنے صفحہ کے فونٹ اور لنک اسٹائل کو CSS متغیرات کے ساتھ دوبارہ ترتیب دے رہے ہیں۔

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

گرڈ بریک پوائنٹس

جب کہ ہم اپنے گرڈ بریک پوائنٹس کو CSS متغیرات کے طور پر شامل کرتے ہیں (سوائے xs)، آگاہ رہیں کہ CSS متغیر میڈیا کے سوالات میں کام نہیں کرتے ۔ یہ متغیرات کے لیے CSS اسپیک میں ڈیزائن کے لحاظ سے ہے، لیکن آنے والے سالوں میں env()متغیرات کی حمایت کے ساتھ تبدیل ہو سکتا ہے۔ کچھ مددگار لنکس کے لیے اس اسٹیک اوور فلو جواب کو دیکھیں۔ درمیانی وقت میں، آپ ان متغیرات کو دیگر CSS حالات کے ساتھ ساتھ اپنے JavaScript میں بھی استعمال کر سکتے ہیں۔