تھیمنگ بوٹسٹریپ

آسان تھیمنگ اور اجزاء کی تبدیلیوں کے لیے عالمی طرز کی ترجیحات کے لیے ہمارے نئے بلٹ ان Sass متغیرات کے ساتھ بوٹسٹریپ 4 کو حسب ضرورت بنائیں۔

تعارف

بوٹسٹریپ 3 میں، تھیمنگ بڑی حد تک کم، کسٹم سی ایس ایس، اور ایک الگ تھیم اسٹائل شیٹ میں متغیر اوور رائیڈز کے ذریعے چلائی گئی تھی جسے ہم نے اپنی distفائلوں میں شامل کیا تھا۔ کچھ کوشش کے ساتھ، کوئی بھی بنیادی فائلوں کو چھوئے بغیر بوٹسٹریپ 3 کی شکل کو مکمل طور پر دوبارہ ڈیزائن کر سکتا ہے۔ بوٹسٹریپ 4 ایک مانوس، لیکن قدرے مختلف نقطہ نظر فراہم کرتا ہے۔

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

سس

اپنی اپنی اثاثہ پائپ لائن کا استعمال کرتے ہوئے Sass کو مرتب کرتے وقت متغیرات، نقشوں، مکسنس اور مزید کا فائدہ اٹھانے کے لیے ہماری سورس Sass فائلوں کو استعمال کریں۔

فائل کا ڈھانچہ

جب بھی ممکن ہو، بوٹسٹریپ کی بنیادی فائلوں میں ترمیم کرنے سے گریز کریں۔ ساس کے لیے، اس کا مطلب ہے کہ آپ کی اپنی اسٹائل شیٹ بنانا جو بوٹسٹریپ کو درآمد کرتی ہے تاکہ آپ اس میں ترمیم اور توسیع کر سکیں۔ فرض کریں کہ آپ npm جیسے پیکیج مینیجر کا استعمال کر رہے ہیں، آپ کے پاس ایک فائل کا ڈھانچہ ہوگا جو اس طرح لگتا ہے:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

اگر آپ نے ہماری سورس فائلیں ڈاؤن لوڈ کی ہیں اور پیکیج مینیجر استعمال نہیں کر رہے ہیں، تو آپ بوٹسٹریپ کی سورس فائلوں کو اپنے سے الگ رکھتے ہوئے، اس ڈھانچے سے ملتی جلتی کوئی چیز دستی طور پر ترتیب دینا چاہیں گے۔

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

درآمد کرنا

آپ میں custom.scss، آپ بوٹسٹریپ کی سورس Sass فائلیں درآمد کریں گے۔ آپ کے پاس دو اختیارات ہیں: تمام بوٹسٹریپ شامل کریں، یا اپنی ضرورت کے پرزے منتخب کریں۔ ہم مؤخر الذکر کی حوصلہ افزائی کرتے ہیں، حالانکہ آگاہ رہیں کہ ہمارے تمام اجزاء میں کچھ تقاضے اور انحصار موجود ہیں۔ آپ کو ہمارے پلگ انز کے لیے کچھ جاوا اسکرپٹ بھی شامل کرنے کی ضرورت ہوگی۔

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

اس سیٹ اپ کے ساتھ، آپ اپنے Sass متغیرات اور نقشوں میں سے کسی میں ترمیم کرنا شروع کر سکتے ہیں custom.scss۔ // Optionalآپ ضرورت کے مطابق سیکشن کے تحت بوٹسٹریپ کے حصے شامل کرنا بھی شروع کر سکتے ہیں ۔ ہم اپنی bootstrap.scssفائل سے مکمل درآمدی اسٹیک کو اپنے نقطہ آغاز کے طور پر استعمال کرنے کا مشورہ دیتے ہیں۔

متغیر ڈیفالٹس

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

آپ کو بوٹسٹریپ کے متغیرات کی مکمل فہرست مل جائے گی scss/_variables.scss۔ کچھ متغیرات پر سیٹ ہیں null، یہ متغیرات پراپرٹی کو آؤٹ پٹ نہیں کرتے جب تک کہ وہ آپ کی کنفیگریشن میں اوور رائڈ نہ ہوں۔

متغیر اوور رائیڈز ہمارے فنکشنز، ویری ایبلز اور مکسینز کو درآمد کرنے کے بعد، لیکن باقی درآمدات سے پہلے آنا چاہیے۔

یہاں ایک مثال ہے جو npm کے ذریعے بوٹسٹریپ کو درآمد اور مرتب کرتے وقت تبدیل background-colorکرتی ہے color:<body>

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

بوٹسٹریپ میں کسی بھی متغیر کے لیے حسب ضرورت دہرائیں، بشمول ذیل میں عالمی اختیارات۔

ہمارے اسٹارٹر پروجیکٹ کے ساتھ npm کے ذریعے Bootstrap کے ساتھ شروع کریں! twbs /bootstrap-npm-starter ٹیمپلیٹ ریپوزٹری کی طرف جائیں یہ دیکھنے کے لیے کہ آپ کے اپنے npm پروجیکٹ میں بوٹسٹریپ کو کیسے بنایا جائے اور کس طرح اپنی مرضی کے مطابق بنایا جائے۔ Sass compiler، Autoprefixer، Stylelint، PurgeCSS، اور Bootstrap شبیہیں شامل ہیں۔

نقشے اور لوپس

بوٹسٹریپ 4 میں مٹھی بھر ساس نقشے، کلیدی قدر کے جوڑے شامل ہیں جو متعلقہ CSS کے خاندانوں کو پیدا کرنا آسان بناتے ہیں۔ ہم اپنے رنگوں، گرڈ بریک پوائنٹس، اور مزید کے لیے Sass نقشے استعمال کرتے ہیں۔ ساس متغیرات کی طرح، تمام ساس نقشوں میں !defaultجھنڈا شامل ہے اور اسے اوور رائڈ اور بڑھایا جا سکتا ہے۔

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

نقشہ میں ترمیم کریں۔

$theme-colorsہمارے نقشے میں موجودہ رنگ میں ترمیم کرنے کے لیے، اپنی حسب ضرورت Sass فائل میں درج ذیل کو شامل کریں:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

نقشے میں شامل کریں۔

میں نیا رنگ $theme-colorsشامل کرنے کے لیے، نئی کلید اور قدر شامل کریں:

$theme-colors: (
  "custom-color": #900
);

نقشے سے ہٹا دیں۔

$theme-colorsیا کسی دوسرے نقشے سے رنگوں کو ہٹانے کے لیے، استعمال کریں map-remove۔ آگاہ رہیں کہ آپ کو اسے ہماری ضروریات اور اختیارات کے درمیان داخل کرنا ہوگا:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

مطلوبہ چابیاں

بوٹسٹریپ Sass نقشوں کے اندر کچھ مخصوص کلیدوں کی موجودگی کو فرض کرتا ہے جیسا کہ ہم نے خود ان کو استعمال کیا اور بڑھایا۔ جیسے ہی آپ شامل نقشوں کو اپنی مرضی کے مطابق بناتے ہیں، آپ کو ایسی غلطیوں کا سامنا کرنا پڑ سکتا ہے جہاں ایک مخصوص Sass نقشہ کی کلید استعمال ہو رہی ہو۔

مثال کے طور پر، ہم لنکس، بٹن، اور فارم اسٹیٹس کے لیے primary، successاور dangerکیز سے استعمال کرتے ہیں۔ $theme-colorsان کلیدوں کی اقدار کو تبدیل کرنے سے کوئی مسئلہ نہیں ہونا چاہئے، لیکن ان کو ہٹانے سے Sass کی تالیف کے مسائل پیدا ہو سکتے ہیں۔ ان مثالوں میں، آپ کو Sass کوڈ میں ترمیم کرنے کی ضرورت ہوگی جو ان اقدار کو استعمال کرتا ہے۔

افعال

بوٹسٹریپ کئی Sass فنکشنز کا استعمال کرتا ہے، لیکن صرف ایک ذیلی سیٹ عام تھیمنگ پر لاگو ہوتا ہے۔ ہم نے رنگین نقشوں سے اقدار حاصل کرنے کے لیے تین افعال شامل کیے ہیں:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

یہ آپ کو ساس نقشے سے ایک رنگ چننے کی اجازت دیتے ہیں جیسے کہ آپ v3 سے رنگ متغیر کا استعمال کرتے ہیں۔

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

نقشے سے رنگ کی ایک خاص سطح حاصل کرنے کے لیے ہمارے پاس ایک اور فنکشن بھی ہے۔ $theme-colorsمنفی سطح کی قدریں رنگ کو ہلکا کر دے گی، جبکہ اعلیٰ سطحیں سیاہ ہو جائیں گی۔

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

عملی طور پر، آپ فنکشن کو کال کریں گے اور دو پیرامیٹرز میں پاس کریں گے: رنگ کا نام $theme-colors(مثال کے طور پر، بنیادی یا خطرہ) اور ایک عددی سطح۔

.custom-element {
  color: theme-color-level(primary, -10);
}

اضافی فنکشنز مستقبل میں شامل کیے جا سکتے ہیں یا آپ کی اپنی مرضی کے مطابق Sass کو اضافی Sass نقشوں کے لیے لیول فنکشنز بنانے کے لیے، یا یہاں تک کہ اگر آپ زیادہ لفظی ہونا چاہتے ہیں تو ایک عام۔

رنگ کے برعکس

ایک اضافی فنکشن جو ہم بوٹسٹریپ میں شامل کرتے ہیں وہ کلر کنٹراسٹ فنکشن ہے color-yiq۔ یہ مخصوص بنیادی رنگ کی بنیاد پر ہلکا ( ) یا گہرا ( ) کنٹراسٹ رنگ خود بخود واپس کرنے کے لیے YIQ رنگ کی جگہ کا استعمال کرتا ہے۔ یہ فنکشن خاص طور پر مکسینز یا لوپس کے لیے مفید ہے جہاں آپ متعدد کلاسز تیار کر رہے ہیں۔#fff#111

مثال کے طور پر، ہمارے $theme-colorsنقشے سے رنگین تبدیلیاں بنانے کے لیے:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

اسے یک طرفہ متضاد ضروریات کے لیے بھی استعمال کیا جا سکتا ہے:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

آپ ہمارے کلر میپ فنکشنز کے ساتھ بنیادی رنگ بھی بتا سکتے ہیں:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

فرار SVG

ہم SVG پس منظر کی تصاویر کے لیے ، اور حروف escape-svgسے بچنے کے لیے فنکشن کا استعمال کرتے ہیں۔ IE میں پس منظر کی تصاویر کو صحیح طریقے سے پیش کرنے کے لیے ان کرداروں کو فرار ہونے کی ضرورت ہے۔ فنکشن استعمال کرتے وقت ، ڈیٹا URIs کا حوالہ دینا ضروری ہے۔<>#escape-svg

افعال شامل کریں اور گھٹائیں

ہم CSS فنکشن کو لپیٹنے کے لیے addاور فنکشنز کا استعمال کرتے ہیں ۔ ان فنکشنز کا بنیادی مقصد غلطیوں سے بچنا ہے جب "unitless" قدر کو اظہار میں منتقل کیا جاتا ہے۔ اس طرح کے تاثرات ریاضی کے لحاظ سے درست ہونے کے باوجود تمام براؤزرز میں ایک خرابی لوٹا دیں گے۔subtractcalc0calccalc(10px - 0)

مثال جہاں کیلک درست ہے:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

مثال جہاں کیلک غلط ہے:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

ساس کے اختیارات

بوٹسٹریپ 4 کو ہماری بلٹ ان حسب ضرورت متغیر فائل کے ساتھ حسب ضرورت بنائیں اور نئے $enable-*Sass متغیرات کے ساتھ عالمی CSS ترجیحات کو آسانی سے ٹوگل کریں۔ متغیر کی قدر کو اوور رائڈ کریں اور npm run testضرورت کے مطابق دوبارہ مرتب کریں۔

scss/_variables.scssآپ بوٹسٹریپ کی فائل میں کلیدی عالمی اختیارات کے لیے ان متغیرات کو تلاش اور اپنی مرضی کے مطابق کر سکتے ہیں ۔

متغیر	اقدار	تفصیل
`$spacer`	`1rem`(پہلے سے طے شدہ)، یا کوئی قدر > 0	پروگرام کے لحاظ سے ہماری سپیسر یوٹیلیٹیز تیار کرنے کے لیے ڈیفالٹ اسپیسر ویلیو کی وضاحت کرتا ہے ۔
`$enable-rounded`	`true`(پہلے سے طے شدہ) یا`false`	`border-radius`مختلف اجزاء پر پہلے سے طے شدہ طرزوں کو فعال کرتا ہے۔
`$enable-shadows`	`true`یا `false`(پہلے سے طے شدہ)	مختلف اجزاء پر پہلے سے طے شدہ آرائشی `box-shadow`طرزوں کو قابل بناتا ہے۔ `box-shadow`فوکس سٹیٹس کے لیے استعمال شدہ s کو متاثر نہیں کرتا۔
`$enable-gradients`	`true`یا `false`(پہلے سے طے شدہ)	`background-image`مختلف اجزاء پر اسٹائل کے ذریعے پہلے سے طے شدہ گریڈینٹ کو فعال کرتا ہے۔
`$enable-transitions`	`true`(پہلے سے طے شدہ) یا`false`	`transition`مختلف اجزاء پر پہلے سے طے شدہ s کو فعال کرتا ہے۔
`$enable-prefers-reduced-motion-media-query`	`true`(پہلے سے طے شدہ) یا`false`	`prefers-reduced-motion`میڈیا استفسار کو فعال کرتا ہے ، جو صارفین کے براؤزر/آپریٹنگ سسٹم کی ترجیحات کی بنیاد پر کچھ اینیمیشنز/ٹرانزیشنز کو دباتا ہے۔
`$enable-hover-media-query`	`true`یا `false`(پہلے سے طے شدہ)	فرسودہ
`$enable-grid-classes`	`true`(پہلے سے طے شدہ) یا`false`	`.container`گرڈ سسٹم (مثلاً، , `.row`, `.col-md-1`, وغیرہ) کے لیے CSS کلاسز کی تخلیق کو فعال کرتا ہے ۔
`$enable-caret`	`true`(پہلے سے طے شدہ) یا`false`	چھدم عنصر کیریٹ کو فعال کرتا ہے `.dropdown-toggle`۔
`$enable-pointer-cursor-for-buttons`	`true`(پہلے سے طے شدہ) یا`false`	غیر فعال بٹن عناصر میں "ہاتھ" کرسر شامل کریں۔
`$enable-print-styles`	`true`(پہلے سے طے شدہ) یا`false`	پرنٹنگ کو بہتر بنانے کے لیے اسٹائل کو فعال کرتا ہے۔
`$enable-responsive-font-sizes`	`true`یا `false`(پہلے سے طے شدہ)	جوابی فونٹ سائز کو فعال کرتا ہے ۔
`$enable-validation-icons`	`true`(پہلے سے طے شدہ) یا`false`	`background-image`متنی ان پٹ کے اندر شبیہیں اور توثیق کی حالتوں کے لیے کچھ حسب ضرورت فارمز کو فعال کرتا ہے۔
`$enable-deprecation-messages`	`true`(پہلے سے طے شدہ) یا`false`	`false`کسی بھی فرسودہ مکسنس اور فنکشنز کو استعمال کرتے وقت انتباہات کو چھپانے کے لیے سیٹ کریں جنہیں میں ہٹانے کا منصوبہ ہے `v5`۔

رنگ

بوٹسٹریپ کے بہت سے مختلف اجزاء اور یوٹیلیٹیز کو ساس میپ میں بیان کردہ رنگوں کی ایک سیریز کے ذریعے بنایا گیا ہے۔ اس نقشے کو ساس میں ختم کیا جا سکتا ہے تاکہ قواعد کی ایک سیریز کو تیزی سے تیار کیا جا سکے۔

تمام رنگ

بوٹسٹریپ 4 میں دستیاب تمام رنگ، ساس متغیرات اور scss/_variables.scssفائل میں ایک ساس نقشہ کے طور پر دستیاب ہیں۔ اضافی شیڈز کو شامل کرنے کے لیے اس کو بعد میں آنے والی معمولی ریلیزز میں بڑھایا جائے گا، جیسا کہ ہم پہلے سے شامل گرے اسکیل پیلیٹ کی طرح۔

$ نیلا #007bff

$indigo #6610f2

$جامنی #6f42c1

گلابی #e83e8c

$سرخ #dc3545

$نارنج #fd7e14

$پیلا #ffc107

$سبز #28a745

نیلی #20c997

$cyan #17a2b8

یہاں یہ ہے کہ آپ ان کو اپنے ساس میں کیسے استعمال کرسکتے ہیں:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

کلر یوٹیلیٹی کلاسزcolor سیٹنگ اور کے لیے بھی دستیاب ہیں background-color۔

مستقبل میں، ہم ہر رنگ کے شیڈز کے لیے Sass نقشے اور متغیرات فراہم کرنے کا ارادہ کریں گے جیسا کہ ہم نے نیچے گرے اسکیل رنگوں کے ساتھ کیا ہے۔

تھیم کے رنگ

ہم رنگ سکیمیں بنانے کے لیے ایک چھوٹا رنگ پیلیٹ بنانے کے لیے تمام رنگوں کا سب سیٹ استعمال کرتے ہیں، جو بوٹسٹریپ کی scss/_variables.scssفائل میں ساس متغیر اور ساس نقشہ کے طور پر بھی دستیاب ہے۔

$primary #007bff

$ثانوی #6c757d

$کامیابی #28a745

$خطرہ #dc3545

$انتباہ #ffc107

$info #17a2b8

$light #f8f9fa

سیاہ #343a40

گرے

سرمئی متغیرات کا ایک وسیع سیٹ اور scss/_variables.scssآپ کے پورے پروجیکٹ میں سرمئی رنگ کے مستقل شیڈز کے لیے ایک ساس نقشہ۔ نوٹ کریں کہ یہ "ٹھنڈی گرے" ہیں، جو غیر جانبدار گرے کے بجائے ایک لطیف نیلے رنگ کی طرف مائل ہوتے ہیں۔

$گرے -100 #f8f9fa

گرے-200 ڈالر #e9ecef

گرے-300 ڈالر #dee2e6

گرے-400 ڈالر #ced4da

$گرے-500 #adb5bd

گرے-600 ڈالر #6c757d

گرے-700 ڈالر #495057

$گرے-800 #343a40

$گرے-900 #212529

کے اندر 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
) !default;

نقشے میں اقدار کو شامل کریں، ہٹائیں یا ان میں ترمیم کریں تاکہ یہ اپ ڈیٹ کیا جا سکے کہ وہ بہت سے دوسرے اجزاء میں کیسے استعمال ہوتے ہیں۔ بدقسمتی سے اس وقت، ہر جزو اس ساس نقشے کو استعمال نہیں کرتا ہے۔ مستقبل کے اپ ڈیٹس اس میں بہتری لانے کی کوشش کریں گے۔ تب تک، ${color}متغیرات اور اس ساس نقشہ کو استعمال کرنے کا منصوبہ بنائیں۔

اجزاء

بوٹسٹریپ کے بہت سے اجزاء اور یوٹیلیٹیز ایسے @eachلوپس کے ساتھ بنائے گئے ہیں جو ایک ساس نقشے پر دہراتے ہیں۔ یہ خاص طور پر ہماری طرف سے کسی جزو کی $theme-colorsمختلف حالتیں پیدا کرنے اور ہر بریک پوائنٹ کے لیے جوابی تغیرات بنانے میں مددگار ہے۔ جیسا کہ آپ ان ساس نقشوں کو اپنی مرضی کے مطابق بناتے ہیں اور دوبارہ مرتب کرتے ہیں، آپ خود بخود اپنی تبدیلیاں ان لوپس میں جھلکتے ہوئے دیکھیں گے۔

ترمیم کرنے والے

بوٹسٹریپ کے بہت سے اجزاء بیس موڈیفائر کلاس اپروچ کے ساتھ بنائے گئے ہیں۔ اس کا مطلب ہے کہ اسٹائل کا بڑا حصہ بنیادی طبقے (مثلاً، .btn) پر مشتمل ہے جب کہ طرز کی تغیرات صرف ترمیم کرنے والے طبقوں تک محدود ہیں (مثلاً، .btn-danger)۔ یہ موڈیفائر کلاسز $theme-colorsنقشہ سے بنائی گئی ہیں تاکہ ہماری موڈیفائر کلاسز کے نمبر اور نام کو حسب ضرورت بنایا جا سکے۔

یہاں دو مثالیں ہیں کہ ہم نقشے کو کس طرح لوپ کرتے ہیں تاکہ جزو اور اپنی تمام پس منظر کی افادیت $theme-colorsمیں ترمیم کرنے والے پیدا کریں ۔.alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

جوابدہ

یہ ساس لوپس صرف رنگین نقشوں تک ہی محدود نہیں ہیں۔ آپ اپنے اجزاء یا افادیت کے جوابی تغیرات بھی پیدا کر سکتے ہیں۔ مثال کے طور پر ہماری ریسپانسیو ٹیکسٹ الائنمنٹ یوٹیلیٹیز کو لیں جہاں ہم میڈیا کے سوال کے ساتھ ساس میپ کے @eachلیے ایک لوپ کو ملاتے ہیں۔$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

اگر آپ کو اپنے میں ترمیم کرنے کی ضرورت ہے تو $grid-breakpoints، آپ کی تبدیلیاں اس نقشے پر تکرار کرنے والے تمام لوپس پر لاگو ہوں گی۔

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

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

دستیاب متغیرات

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

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

مثالیں

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

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

بریک پوائنٹ متغیرات

جب کہ ہم نے اصل میں اپنے CSS متغیرات میں بریک پوائنٹس شامل کیے ہیں (مثال کے طور پر --breakpoint-md)، یہ میڈیا کے سوالات میں تعاون یافتہ نہیں ہیں ، لیکن پھر بھی انہیں میڈیا کے سوالات میں قواعد کے اندر استعمال کیا جا سکتا ہے ۔ یہ بریک پوائنٹ متغیر پسماندہ مطابقت کے لیے مرتب کردہ CSS میں رہتے ہیں بشرطیکہ انہیں JavaScript کے ذریعے استعمال کیا جا سکے۔ تفصیلات میں مزید جانیں ۔

یہاں اس کی ایک مثال ہے جو تعاون یافتہ نہیں ہے:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

اور یہاں اس کی ایک مثال ہے جس کی تائید کی جاتی ہے:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}