ڕەنگ

بووتستراپ بە سیستەمێکی ڕەنگاوڕەنگی بەرفراوان پشتگیری دەکرێت کە ستایل و پێکهاتەکانمان تەوەر دەکات. ئەمەش خۆکارکردن و درێژکردنەوەی گشتگیرتر بۆ هەر پرۆژەیەک چالاک دەکات.

لەم پەیجەدا

ڕەنگەکانی تەوەر

ئێمە ژێرکۆمەڵێک لە هەموو ڕەنگەکان بەکاردەهێنین بۆ دروستکردنی پالێتێکی ڕەنگی بچووکتر بۆ دروستکردنی پلانی ڕەنگەکان، هەروەها وەک گۆڕاوەی Sass و نەخشەی Sass لە scss/_variables.scssفایلەکەی Bootstrapدا بەردەستە.

سەرەکی

لاوەکی

سەرکەوتن

مەترسی

ئاگادار کردنەوە

زانیاری

ڕووناکی

تاریک

هەموو ئەم ڕەنگانە وەک نەخشەی ساس بەردەستە، $theme-colors.

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

سەیری نەخشە و دۆکیومێنتەکانی لوپەکانی Sass بکە بۆ چۆنیەتی دەستکاریکردنی ئەم ڕەنگانە.

هەموو ڕەنگەکان

هەموو ڕەنگەکانی Bootstrap وەک گۆڕاوەی Sass و نەخشەی Sass لە scss/_variables.scssفایلدا بەردەستە. بۆ ئەوەی قەبارەی فایلەکان زیاد نەکەین، ئێمە پۆلی دەق یان ڕەنگی پاشبنەما بۆ هەریەکێک لەم گۆڕاوانە دروست ناکەین. لەبری ئەوە، ئێمە ژێرکۆمەڵێک لەم ڕەنگانە هەڵدەبژێرین بۆ پالێتی تەوەرێک .

دڵنیابە لە چاودێریکردنی ڕێژەی کۆنتراستەکان لەکاتی خۆکارکردنی ڕەنگەکان. وەک لە خوارەوە نیشان دراوە، ئێمە سێ ڕێژەی کۆنتراستمان زیاد کردووە بۆ هەریەک لە ڕەنگە سەرەکییەکان- یەکێکیان بۆ ڕەنگەکانی ئێستای سواتچەکە، یەکێکیان بۆ بەرامبەر سپی و یەکێکیان بۆ بەرامبەر ڕەش.

$شین#0d6efd

$شین-100

$شین-200

$شین-300

$شین-400

$شین-500

$شین-600

$شین-700

$شین-800

شین-900$

$indigo#6610f2

$ئیندیگۆ-100

$ئیندیگۆ-200

$ئیندیگۆ-300

$ئیندیگۆ-400

$ئیندیگۆ-500

$ئیندیگۆ-600

$ئیندیگۆ-700

$ئیندیگۆ-800

$ئیندیگۆ-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

$ سوور-٦٠٠

$ سوور-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

سەوز-٢٠٠ دۆلار

سەوز-300$

سەوز-٤٠٠ دۆلار

سەوز-500$

سەوز-٦٠٠ دۆلار

سەوز-700$

سەوز-800$

سەوز-900$

$teal#20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$سیان#0dcaf0

$سیان-100

$سیان-200

$سیان-300

$سیان-400

$سیان-500

$سیان-600

$سیان-700

$سیان-800

$سیان-900

$ خۆڵەمێشی-500#adb5bd

$ خۆڵەمێشی-100

$ خۆڵەمێشی-200

$ خۆڵەمێشی-300

$ خۆڵەمێشی-400

$ خۆڵەمێشی-500

$ خۆڵەمێشی-600

$ خۆڵەمێشی-700

$ خۆڵەمێشی-800

$ خۆڵەمێشی-900

$ڕەش#000

$سپی#fff

تێبینی لەسەر ساس

ساس ناتوانێت بە شێوەیەکی بەرنامەیی گۆڕاوەکان دروست بکات، بۆیە ئێمە بە دەستی گۆڕاوەکانمان بۆ هەموو ڕەنگ و سێبەرێک دروست کرد خۆمان. ئێمە بەهای خاڵی ناوەڕاست دیاری دەکەین (بۆ نموونە، $blue-500) و فەنکشنەکانی ڕەنگی تایبەت بەکاردەهێنین بۆ ڕەنگکردن (ڕووناککردنەوە) یان سێبەرکردن (تۆخکردنی) ڕەنگەکانمان لە ڕێگەی mix()فەنکشنی ڕەنگی Sass.

بەکارهێنان mix()هەمان شت نییە لەگەڵ lighten()و darken()—یەکەمیان ڕەنگی دیاریکراو لەگەڵ سپی یان ڕەش تێکەڵ دەکات، لە کاتێکدا دووەمیان تەنها بەهای سووکایەتی هەر ڕەنگێک ڕێکدەخات. ئەنجامەکەی کۆمەڵێک ڕەنگی زۆر تەواوترە، وەک لەم دیمۆیەی CodePen دا نیشان دراوە .

فەنکشنەکانی tint-color()و shade-color()فەنکشنەکانمان mix()شانبەشانی $theme-color-intervalگۆڕاوەکەمان بەکاردەهێنن، کە بەهایەکی ڕێژەیی هەنگاودار بۆ هەر ڕەنگێکی تێکەڵاو دیاری دەکات کە بەرهەمی دەهێنین. بۆ زانینی تەواوی کۆدی سەرچاوە سەیری فایلەکانی scss/_functions.scssو بکە.scss/_variables.scss

نەخشەکانی ساس ڕەنگاوڕەنگ

فایلە سەرچاوەییەکانی Sass ی Bootstrap سێ نەخشە لەخۆدەگرێت کە یارمەتیت دەدات بە خێرایی و بە ئاسانی بەسەر لیستی ڕەنگەکان و بەها هێکسەکانیاندا لوپ بکەیت.

$colorsهەموو ڕەنگەکانی بنەڕەتی ( 500) بەردەستمان دەخاتە ڕوو
$theme-colorsهەموو ڕەنگەکانی تەوەر کە بە شێوەیەکی مانادار ناویان لێنراوە لیست دەکات (لە خوارەوە نیشان دراوە)
$graysهەموو ڕەنگ و سێبەرەکانی خۆڵەمێشی دەخاتە ڕوو

لەناو scss/_variables.scss, گۆڕاوە ڕەنگەکانی Bootstrap و نەخشەی Sass دەبینیتەوە. لێرەدا نموونەیەک لە $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}گۆڕاوەکان و ئەم نەخشەیەی ساس.

نموونە

لێرەدا چۆن دەتوانیت ئەمانە لە ساسەکەتدا بەکاربهێنیت:

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

هەروەها پۆلەکانی سوودمەندی ڕەنگ و پاشبنەماcolor بەردەستە بۆ ڕێکخستن و background-colorبەکارهێنانی 500بەهاکانی ڕەنگەکان.

بەرهەمهێنانی خزمەتگوزارییەکان

لە v5.1.0 زیاد کراوە

Bootstrap سوودەکانی بۆ هەموو گۆڕاوێکی ڕەنگ لەخۆناگرێت 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/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}بۆ هەموو ڕەنگ و ئاستێک دروست دەکات. دەتوانیت هەمان شت بۆ هەر خزمەتگوزاری و موڵکێکی تریش بکەیت.