مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
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 ڊالر
نيرو-600 ڊالر
نيرو-700 ڊالر
نيرو-800 ڊالر
نيرو-900 ڊالر
$انڊيگو#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
گلابي-100 ڊالر
گلابي- 200 ڊالر
گلابي-300 ڊالر
گلابي-400 ڊالر
$ گلابي-500
گلابي-600 ڊالر
گلابي-700 ڊالر
گلابي-800 ڊالر
گلابي-900 ڊالر
$ڳاڙهو#dc3545
$ ڳاڙھو-100
ڳاڙهو - 200 ڊالر
$ ڳاڙھو-300
ڳاڙهو-400 ڊالر
ڳاڙهو-500 ڊالر
ڳاڙهو-600 ڊالر
ڳاڙهو-700 ڊالر
ڳاڙهو-800 ڊالر
ڳاڙهو-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
ٽيل-100 ڊالر
ٽيل-200 ڊالر
ٽيل-300 ڊالر
ٽيل-400 ڊالر
ٽيل-500 ڊالر
ٽيل-600 ڊالر
ٽيل-700 ڊالر
ٽيل-800 ڊالر
ٽيل-900 ڊالر
$سيان#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

افاديت پيدا ڪرڻ

v5.1.0 ۾ شامل ڪيو ويو

بوٽ اسٽريپ ۾ شامل نه آهي color۽ background-colorهر رنگ جي متغير لاءِ يوٽيلٽيز، پر توهان اهي پاڻ ٺاهي سگهو ٿا اسان جي يوٽيلٽي API ۽ اسان جي وڌايل Sass نقشن سان جيڪي v5.1.0 ۾ شامل ڪيا ويا آهن.

  1. شروع ڪرڻ لاءِ، پڪ ڪريو ته توھان درآمد ڪيو آھي اسان جا افعال، متغير، ميڪسين، ۽ افاديت.
  2. اسان جو map-merge-multiple()فنڪشن استعمال ڪريو جلدي گھڻن ساس نقشن کي نئين نقشي ۾ گڏ ڪرڻ لاءِ.
  3. {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}هي هر رنگ ۽ سطح لاء نئين افاديت پيدا ڪندو . توهان ساڳيو ڪم ڪري سگهو ٿا ڪنهن ٻئي افاديت ۽ ملڪيت لاءِ پڻ.