Theming Bootstrap
اسان جي نئين بلٽ ان Sass متغيرن سان بوٽ اسٽريپ 4 کي ڪسٽمائي ڪريو عالمي طرز جي ترجيحن لاءِ آسان موضوعن ۽ جزن جي تبديلين لاءِ.
تعارف
Bootstrap 3 ۾، موضوع گهڻو ڪري LESS، ڪسٽم CSS، ۽ هڪ الڳ موضوع واري اسٽائل شيٽ ۾ متغير اوور رائڊز ذريعي هلائي وئي جيڪا اسان اسان جي dist
فائلن ۾ شامل ڪئي. ڪجھ ڪوششن سان، ھڪڙي بنيادي فائلن کي ڇھڻ کان سواء بوٽ اسٽراپ 3 جي نظر کي مڪمل طور تي تبديل ڪري سگھي ٿو. Bootstrap 4 هڪ واقف، پر ٿورڙو مختلف طريقو مهيا ڪري ٿو.
ھاڻي، موضوع ساس متغير، ساس نقشا، ۽ ڪسٽم سي ايس ايس پاران مڪمل ڪيو ويو آھي. ڪابه وڌيڪ وقف ٿيل موضوع اسٽائل شيٽ ناهي؛ بجاءِ، توھان چالو ڪري سگھوٿا بلٽ ان تھیم کي شامل ڪرڻ لاءِ گريڊيئينٽ، شيڊز ۽ وڌيڪ.
ساس
اسان جي ماخذ Sass فائلن کي استعمال ڪريو متغيرن، نقشن، ميڪسينز، ۽ وڌيڪ جو فائدو وٺڻ لاءِ جڏهن Sass کي گڏ ڪري توهان جي پنهنجي اثاثن واري پائپ لائن کي استعمال ڪندي.
فائل جي جوڙجڪ
جڏهن به ممڪن هجي، بوٽ اسٽراپ جي بنيادي فائلن کي تبديل ڪرڻ کان پاسو ڪريو. ساس لاءِ، ان جو مطلب آهي توهان جي پنهنجي اسٽائل شيٽ ٺاهڻ جيڪا بوٽ اسٽريپ درآمد ڪري ٿي ته جيئن توهان ان کي تبديل ۽ وڌائي سگهو. فرض ڪيو ته توهان استعمال ڪري رهيا آهيو هڪ پيڪيج مئنيجر جهڙوڪ npm، توهان وٽ هوندو هڪ فائيل ڍانچي جيڪو هن جهڙو نظر اچي ٿو:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
جيڪڏهن توهان اسان جون ماخذ فائلون ڊائون لوڊ ڪيون آهن ۽ پيڪيج مئنيجر استعمال نه ڪري رهيا آهيو، ته توهان چاهيو ٿا دستي طور تي ان ڍانچي سان ملندڙ جلندڙ ڪا شيءِ، بوٽ اسٽريپ جي سورس فائلن کي پنهنجي پاڻ کان الڳ رکندي.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
درآمد ڪرڻ
توھان ۾ custom.scss
، توھان درآمد ڪندا Bootstrap جو ذريعو 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
فائل مان مڪمل درآمد اسٽيڪ استعمال ڪرڻ جي صلاح ڏيو ٿا.
متغير ڊفالٽ
Bootstrap ۾ ھر Sass variable ۾ جھنڊو شامل آھي !default
توھان کي اجازت ڏئي ٿو توھان جي پنھنجي Sass ۾ متغير جي ڊفالٽ ويل کي اوور رائيڊ ڪرڻ جي بغير بوٽ اسٽريپ جي سورس ڪوڊ کي تبديل ڪرڻ جي. ڪاپي ۽ پيسٽ ڪريو متغيرات جي ضرورت مطابق، انهن جي قيمتن کي تبديل ڪريو، ۽ !default
پرچم کي هٽايو. جيڪڏهن هڪ متغير اڳ ۾ ئي تفويض ڪيو ويو آهي، پوء اهو بوٽ اسٽراپ ۾ ڊفالٽ ويلز طرفان ٻيهر تفويض نه ڪيو ويندو.
توھان کي Bootstrap جي متغيرن جي مڪمل فهرست ملندي scss/_variables.scss
. ڪجھ متغيرات تي مقرر ڪيا ويا آھن null
، اھي متغير ملڪيت کي ٻاھر نه ڪڍندا آھن جيستائين اھي توھان جي ترتيب ۾ ختم نه ڪيا وڃن.
variable overrides اسان جي افعال، variables، ۽ mixins درآمد ٿيڻ کان پوءِ اچڻ گھرجي، پر باقي وارداتن کان اڳ.
هتي هڪ مثال آهي جيڪو تبديل ڪري ٿو background-color
۽ color
ان لاءِ <body>
جڏهن بوٽ اسٽريپ کي npm ذريعي درآمد ۽ مرتب ڪرڻ:
@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
Bootstrap ۾ ڪنهن به متغير لاءِ ضروري طور تي ورجايو، بشمول هيٺ ڏنل عالمي اختيارن.
نقشا ۽ لوپ
Bootstrap 4 ۾ شامل آھي ھٿ ڀري ساس نقشا، اھم قدر جوڙو جيڪي لاڳاپيل CSS جي خاندانن کي پيدا ڪرڻ آسان بڻائين ٿا. اسان استعمال ڪريون ٿا Sass نقشا اسان جي رنگن لاءِ، گرڊ بريڪ پوائنٽس، ۽ وڌيڪ. بس ساس متغير وانگر، سڀني ساس نقشن ۾ !default
پرچم شامل آهي ۽ ختم ڪري سگھجي ٿو ۽ وڌايو وڃي ٿو.
اسان جا ڪجھ ساس نقشا ڊفالٽ طور خالي ٿيلن ۾ ضم ٿيل آھن. اهو ڏنو ويو آهي ساس نقشي جي آسان توسيع جي اجازت ڏيڻ لاءِ، پر نقشي مان شيون ختم ڪرڻ جي قيمت تي اچي ٿو ٿورو وڌيڪ ڏکيو.
نقشو تبديل ڪريو
اسان جي $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";
...
گهربل ڪنجيون
Bootstrap Sass نقشن ۾ ڪجھ مخصوص ڪنجين جي موجودگي کي فرض ڪري ٿو جيئن اسان استعمال ڪيو ۽ پاڻ کي وڌايو. جيئن ته توهان شامل ڪيل نقشن کي ترتيب ڏيو ٿا، توهان شايد غلطين کي منهن ڏئي سگهون ٿا جتي هڪ مخصوص Sass نقشي جي ڪنجي استعمال ڪئي پئي وڃي.
مثال طور، اسان استعمال ڪندا آهيون primary
, success
, and danger
key from from $theme-colors
links, buttons, and form states. انهن ڪنجين جي قدرن کي تبديل ڪرڻ سان ڪوبه مسئلو نه هجڻ گهرجي، پر انهن کي هٽائڻ سان ساس تاليف جا مسئلا ٿي سگهن ٿا. انهن مثالن ۾، توهان کي 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
هي فنڪشن خاص طور تي ڪارائتو آهي mixins يا loops لاءِ جتي توهان ڪيترائي ڪلاس ٺاهي رهيا آهيو.
$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
اسان escape-svg
فنڪشن استعمال ڪندا آهيون فرار ٿيڻ لاءِ <
, >
۽ #
ڪردار SVG پس منظر جي تصويرن لاءِ. IE ۾ پس منظر جي تصويرن کي صحيح طور تي پيش ڪرڻ لاءِ انھن ڪردارن کي فرار ٿيڻو پوندو. جڏهن escape-svg
فنڪشن استعمال ڪندي، ڊيٽا URIs جو حوالو ڏنو وڃي.
شامل ڪريو ۽ ختم ڪريو افعال
اسان CSS فنڪشن کي لپائڻ لاءِ add
۽ فنڪشن استعمال ڪندا آهيون . انهن ڪمن جو بنيادي مقصد اهو آهي ته غلطين کان بچڻ لاءِ جڏهن هڪ ”يونائيٽ“ قدر کي اظهار ۾ منتقل ڪيو وڃي. ايڪسپريس وانگر سڀني برائوزرن ۾ غلطي موٽائي ويندي، جيتوڻيڪ رياضياتي طور تي صحيح هجڻ جي باوجود.subtract
calc
0
calc
calc(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);
}
ساس اختيارن
Bootstrap 4 کي اسان جي بلٽ ان ڪسٽم متغير فائل سان ترتيب ڏيو ۽ آساني سان عالمي CSS ترجيحن کي نئين $enable-*
Sass متغيرن سان ٽوگل ڪريو. هڪ متغير جي قيمت کي ختم ڪريو ۽ npm run test
ضرورت مطابق ٻيهر گڏ ڪريو.
توھان ڳولي سگھوٿا ۽ انھن متغيرن کي ڪھڙي عالمي اختيارن لاءِ Bootstrap جي 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 , etc.). |
$enable-caret |
true (ڊفالٽ) ياfalse |
pseudo element caret تي فعال ڪري ٿو .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 |
قابل بنائي ٿو icons background-image اندر اندر متن جي ان پٽن ۽ تصديق جي رياستن لاء ڪجهه ڪسٽم فارم. |
$enable-deprecation-messages |
true (ڊفالٽ) ياfalse |
ڊيڄاريندڙن کي لڪائڻ لاءِ سيٽ ڪريو false جڏهن ڪنهن به ختم ٿيل ميڪسينس ۽ افعال کي استعمال ڪيو وڃي جن کي هٽائڻ جي منصوبابندي ڪئي وئي آهي v5 . |
رنگ
بوٽ اسٽريپ جا ڪيترائي مختلف جزا ۽ افاديتون ٺهيل آهن رنگن جي هڪ سيريز جي ذريعي ساس نقشي ۾ بيان ڪيل. ھن نقشي کي لوپ ڪري سگھجي ٿو ساس ۾ تڪڙو ھڪڙو سلسلو پيدا ڪرڻ لاءِ.
سڀ رنگ
Bootstrap 4 ۾ موجود سڀئي رنگ، موجود آهن Sass variables ۽ scss/_variables.scss
فائل ۾ Sass نقشي جي طور تي. اھو وڌايو ويندو ايندڙ نابالغ رليزز ۾ اضافي رنگن کي شامل ڪرڻ لاءِ، گھڻو ڪري جھڙوڪ گريس اسڪيل پيلٽ اسان اڳ ۾ ئي شامل ڪيو آھي.
ھتي آھي توھان پنھنجي ساس ۾ انھن کي ڪيئن استعمال ڪري سگھو ٿا:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
رنگ يوٽيلٽي ڪلاس پڻ سيٽنگ color
۽ background-color
.
موضوع جا رنگ
اسان سڀني رنگن جو ذيلي سيٽ استعمال ڪريون ٿا ھڪڙو ننڍڙو رنگ پيلٽ ٺاھڻ لاءِ رنگ اسڪيمون تيار ڪرڻ لاءِ، پڻ موجود آھي ساس متغير ۽ ساس نقشي طور بوٽ اسٽريپ جي scss/_variables.scss
فائل ۾.
گرين
گرين متغيرن جو هڪ وسيع سيٽ ۽ هڪ ساس نقشو scss/_variables.scss
توهان جي پروجيڪٽ ۾ گرين جي مسلسل رنگن لاءِ. نوٽ ڪريو ته اهي ”ٿڌي گرين“ آهن، جيڪي غير جانبدار گرين جي بجاءِ هڪ ذهين نيري رنگ جي طرف ٿين ٿا.
اندر 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
, توھان جون تبديليون ان نقشي تي ورجائيندڙ سڀني لوپس تي لاڳو ٿينديون.
CSS متغير
Bootstrap 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;
}
مثال
CSS متغير 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);
}
}