اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
Check
in English

رنګ

بوټسټریپ د پراخه رنګ سیسټم لخوا ملاتړ کیږي چې زموږ سټایلونه او اجزاوې موضوعات کوي. دا د هرې پروژې لپاره خورا پراخه تخصیص او توسیع وړ کوي.

د موضوع رنګونه

scss/_variables.scssموږ د رنګ سکیمونو رامینځته کولو لپاره د کوچني رنګ پیلیټ رامینځته کولو لپاره د ټولو رنګونو فرعي سیټ کاروو ، د Sass متغیرونو او د بوټسټریپ فایل کې د Sass نقشې په توګه هم شتون لري .

لومړني
ثانوي
بریالیتوب
خطر
خبرتیا
معلومات
رڼا
تیاره

دا ټول رنګونه د Sass نقشې په توګه شتون لري $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

زموږ د Sass نقشې او لوپس سندونه وګورئ چې دا رنګونه څنګه بدل کړئ.

ټول رنګونه

scss/_variables.scssد بوټسټریپ ټول رنګونه په فایل کې د Sass تغیراتو او د Sass نقشې په توګه شتون لري . د دې لپاره چې د فایل اندازې زیاتوالي مخه ونیول شي، موږ د دې هر متغیر لپاره متن یا د شالید رنګ ټولګي نه جوړوو. پرځای یې، موږ د موضوع پیلیټ لپاره د دې رنګونو فرعي سیټ غوره کوو .

ډاډ ترلاسه کړئ چې د برعکس تناسب څارنه وکړئ کله چې تاسو رنګونه تنظیم کړئ. لکه څنګه چې لاندې ښودل شوي، موږ هر یو اصلي رنګونو ته درې برعکس نسبتونه اضافه کړي دي - یو د سویچ اوسني رنګونو لپاره، یو د سپینو په مقابل کې، او بل د تور لپاره.

$ نیلي#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 ډالر
$ red-900
$نارنج#fd7e14
نارنج - 100 ډالر
نارنجي - 200 ډالر
نارنجي - 300 ډالر
نارنجي - 400 ډالر
نارنجي - 500 ډالر
نارنجي - 600 ډالر
نارنجي - 700 ډالر
نارنجي - 800 ډالر
نارنجي - 900 ډالر
$زیړ#ffc107
$ زېړ - 100
$ ژیړ - 200
$ ژیړ - 300
$ زېړ - 400
$ ژیړ - 500
$ ژیړ - 600
$ ژیړ - 700
$ ژیړ - 800
$ ژیړ - 900
زرغون#۱۹۸۷۵۴
زرغون - 100 ډالر
شین - 200 ډالر
زرغون - 300 ډالر
زرغون - 400 ډالر
زرغون - 500 ډالر
زرغون - 600 ډالر
زرغون - 700 ډالر
شین - 800 ډالر
زرغون - 900 ډالر
$ټیل#20c997
$ټیل-100
ټیل - ۲۰۰ ډالر
ټیل - 300 ډالر
تېل 400 ډالر
ټيل-۵۰۰ ډالر
تېل-۶۰۰ ډالر
ټيل-۷۰۰ ډالر
$ټیل-۸۰۰
$ټیل-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 په اړه یادښتونه

Sass نشي کولی په برنامه ډول متغیرونه رامینځته کړي ، نو موږ په لاسي ډول د هر رنګ او سیوري لپاره متغیرونه رامینځته کړل. موږ د منځنۍ نقطې ارزښت (د مثال په توګه $blue-500) مشخص کوو او د ساس د رنګ فعالیت له لارې زموږ رنګونه ټینټ (روښانه) یا سیوري (تیرو) لپاره د دودیز رنګ افعال کاروو mix().

کارول mix()ورته نه دي lighten()او darken()- پخوانی مشخص رنګ د سپین یا تور سره مخلوط کوي، پداسې حال کې چې وروستنی یوازې د هر رنګ روښنايي ارزښت تنظیموي. پایله د رنګونو خورا ډیر بشپړ سویټ دی ، لکه څنګه چې پدې CodePen ډیمو کې ښودل شوي .

زموږ tint-color()او shade-color()افعال mix()زموږ د متغیر سره یوځای کاروي $theme-color-interval، کوم چې د هر مخلوط رنګ لپاره چې موږ یې تولید کوو یو ګام فیصده ارزښت ټاکي. د بشپړ سرچینې کوډ لپاره فایلونه scss/_functions.scssوګورئ .scss/_variables.scss

د رنګ ساس نقشه

د بوټسټریپ سرچینې ساس فایلونو کې درې نقشې شاملې دي ترڅو تاسو سره د رنګونو لیست او د دوی هیکس ارزښتونو په چټکۍ او اسانۍ سره لوپ کې مرسته وکړي.

  • $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,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

په نقشه کې ارزښتونه اضافه کړئ، لیرې کړئ، یا بدل کړئ ترڅو تازه کړئ چې دوی په ډیری نورو برخو کې څنګه کارول کیږي. بدبختانه پدې وخت کې ، هره برخه دا ساس نقشه نه کاروي. راتلونکي تازه معلومات به پدې کې د ښه والي لپاره هڅه وکړي. تر هغه وخته، د ${color}متغیرونو او د دې Sass نقشې کارولو په اړه پالن جوړ کړئ.

بېلګه

دلته دا دي چې تاسو څنګه کولی شئ دا په خپل ساس کې وکاروئ:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

د رنګ ارزښتونو ترتیب او کارولو لپاره د رنګ او شالید کارولو ټولګي هم شتون لري .colorbackground-color500

د اسانتیاوو پیدا کول

په 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/maps";
@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}د هر رنګ او کچې لپاره نوي اسانتیاوې رامینځته کړي. تاسو کولی شئ د نورو خدماتو او ملکیت لپاره هم ورته کار وکړئ.