رنگ
بوٽ اسٽريپ هڪ وسيع رنگ سسٽم جي حمايت ڪئي آهي جيڪا اسان جي اندازن ۽ اجزاء کي ترتيب ڏئي ٿي. هي ڪنهن به منصوبي لاءِ وڌيڪ جامع ڪسٽمائيزيشن ۽ توسيع کي قابل بنائي ٿو.
موضوع جا رنگ
اسان سڀني رنگن جو ذيلي سيٽ استعمال ڪريون ٿا ھڪڙو ننڍڙو رنگ پيلٽ ٺاھڻ لاءِ رنگ اسڪيمون تيار ڪرڻ لاءِ، پڻ موجود آھي ساس متغير ۽ ساس نقشي طور بوٽ اسٽريپ جي 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
افاديت پيدا ڪرڻ
v5.1.0 ۾ شامل ڪيو ويو
بوٽ اسٽريپ ۾ شامل نه آهي color
۽ background-color
هر رنگ جي متغير لاءِ يوٽيلٽيز، پر توهان اهي پاڻ ٺاهي سگهو ٿا اسان جي يوٽيلٽي API ۽ اسان جي وڌايل Sass نقشن سان جيڪي v5.1.0 ۾ شامل ڪيا ويا آهن.
- شروع ڪرڻ لاءِ، پڪ ڪريو ته توھان درآمد ڪيو آھي اسان جا افعال، متغير، ميڪسين، ۽ افاديت.
- اسان جو
map-merge-multiple()
فنڪشن استعمال ڪريو جلدي گھڻن ساس نقشن کي نئين نقشي ۾ گڏ ڪرڻ لاءِ. {color}-{level}
هن نئين گڏيل نقشي کي ضم ڪريو ڪنهن به افاديت کي ڪلاس جي نالي سان وڌائڻ لاءِ .
ھتي ھڪڙو مثال آھي جيڪو ٺاھي ٿو ٽيڪسٽ رنگ جي افاديت (مثال طور، .text-purple-500
) مٿين قدمن کي استعمال ڪندي.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
.text-{color}-{level}
هي هر رنگ ۽ سطح لاء نئين افاديت پيدا ڪندو . توهان ساڳيو ڪم ڪري سگهو ٿا ڪنهن ٻئي افاديت ۽ ملڪيت لاءِ پڻ.