رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

رنگ

بوت استرپ توسط یک سیستم رنگی گسترده پشتیبانی می‌شود که سبک‌ها و اجزای ما را مضمون می‌کند. این امکان سفارشی سازی و توسعه جامع تری را برای هر پروژه ای فراهم می کند.

رنگ های تم

ما از زیرمجموعه‌ای از همه رنگ‌ها برای ایجاد یک پالت رنگ کوچک‌تر برای تولید طرح‌های رنگی استفاده می‌کنیم، که همچنین به عنوان متغیرهای Sass و نقشه Sass در scss/_variables.scssفایل Bootstrap موجود است.

اولیه
ثانوی
موفقیت
خطر
هشدار
اطلاعات
سبک
تاریک

همه این رنگ ها به عنوان نقشه Sass موجود است $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 دلار
$نیلی#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 دلار
قرمز-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
فیروزه ای-100 دلار
فیروزه ای 200 دلار
سیان-300 دلار
فیروزه ای-400 دلار
500 دلار فیروزه ای
فیروزه ای-600 دلار
فیروزه ای-700 دلار
Cyan-800 دلار
فیروزه ای-900 دلار
خاکستری-500 دلار#adb5bd
خاکستری-100 دلار
خاکستری $200
خاکستری-300 دلار
خاکستری-400 دلار
خاکستری-500 دلار
خاکستری-600 دلار
خاکستری-700 دلار
خاکستری $800
خاکستری $900
دلار سیاه#000
سفید دلار#fff

یادداشت هایی در مورد ساس

Sass نمی تواند به صورت برنامه نویسی متغیرها را تولید کند، بنابراین ما به صورت دستی متغیرهایی را برای هر رنگ و سایه ایجاد می کنیم. ما مقدار نقطه میانی را مشخص می کنیم (به عنوان مثال، $blue-500) و از توابع رنگ سفارشی برای رنگ آمیزی (روشن) یا سایه (تاریک کردن) رنگ ها از طریق mix()تابع رنگ Sass استفاده می کنیم.

استفاده از 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، متغیرهای رنگ Bootstrap و نقشه Sass را خواهید یافت. در اینجا یک نمونه از $colorsنقشه Sass آمده است:

$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
);

مقادیر را در نقشه اضافه، حذف یا تغییر دهید تا نحوه استفاده از آنها در بسیاری از مؤلفه‌های دیگر به‌روزرسانی شود. متأسفانه در حال حاضر، همه مؤلفه ها از این نقشه Sass استفاده نمی کنند. به روز رسانی های آینده در تلاش برای بهبود این موضوع خواهد بود. تا آن زمان، برای استفاده از ${color}متغیرها و این نقشه Sass برنامه ریزی کنید.

مثال

در اینجا نحوه استفاده از آنها در Sass آمده است:

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

کلاس های ابزار رنگ و پس زمینه نیز برای تنظیم colorو background-colorاستفاده از 500مقادیر رنگ موجود است.

تولید آب و برق

اضافه شده در نسخه 5.1.0

Bootstrap شامل colorو background-colorابزارهای کمکی برای هر متغیر رنگی نمی‌شود، اما شما می‌توانید با استفاده از API ابزار ما و نقشه‌های Sass توسعه‌یافته ما که در نسخه 5.1.0 اضافه شده‌اند، اینها را ایجاد کنید.

  1. برای شروع، مطمئن شوید که توابع، متغیرها، میکس‌ها و ابزارهای ما را وارد کرده‌اید.
  2. از map-merge-multiple()تابع ما برای ادغام سریع چندین نقشه Sass با هم در یک نقشه جدید استفاده کنید.
  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}این ابزارهای جدید برای هر رنگ و سطح ایجاد می کند. شما می توانید همین کار را برای هر ابزار و ملک دیگری نیز انجام دهید.