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

رنگ ها

colorبا چند کلاس کاربردی رنگ معنا را از طریق آن منتقل کنید. شامل پشتیبانی از پیوندهای استایل با حالت شناور نیز می شود.

رنگ ها

متن را با ابزارهای رنگی رنگی کنید. اگر می‌خواهید پیوندها را رنگی کنید، می‌توانید از .link-*کلاس‌های کمکی که دارای :hoverو :focusحالت هستند استفاده کنید.

.text-primary

.text-secondary

.text-موفقیت

.متن خطر

متن هشدار

متن-اطلاعات

.text-light

.text-dark

.text-body

متن قطع شده است

متن-سفید

.text-black-50

.text-white-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Deprecation: با اضافه شدن .text-opacity-*ابزارهای کمکی و متغیرهای CSS برای ابزارهای متنی، .text-black-50و .text-white-50از نسخه 5.1.0 منسوخ می شوند. آنها در نسخه 6.0.0 حذف خواهند شد.
انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .visually-hiddenکلاس، گنجانده شده است.

کدورت

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

از نسخه 5.1.0، ابزارهای رنگ متن با Sass با استفاده از متغیرهای CSS تولید می شوند. این امکان تغییر رنگ در زمان واقعی را بدون کامپایل و تغییر شفافیت آلفای پویا فراهم می کند.

چگونه کار می کند

.text-primaryابزار پیش فرض ما را در نظر بگیرید .

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

ما از یک نسخه RGB از متغیر CSS خود --bs-primary(با مقدار 13, 110, 253) استفاده می کنیم و یک متغیر CSS دوم را --bs-text-opacityبرای شفافیت آلفا (با یک مقدار پیش فرض 1به لطف یک متغیر CSS محلی) ضمیمه کردیم. این بدان معناست که هر زمان که .text-primaryاکنون استفاده می کنید، مقدار محاسبه شده شما colorبرابر است با rgba(13, 110, 253, 1). متغیر CSS محلی در داخل هر .text-*کلاس از مسائل وراثت اجتناب می‌کند، بنابراین نمونه‌های تودرتوی برنامه‌ها به طور خودکار شفافیت آلفای اصلاح‌شده ندارند.

مثال

برای تغییر این کدورت، --bs-text-opacityاز طریق استایل‌های سفارشی یا سبک‌های درون خطی لغو کنید.

این متن اصلی پیش فرض است
این متن اصلی 50 درصد کدورت است
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

یا از یکی از .text-opacityابزارهای کمکی انتخاب کنید:

این متن اصلی پیش فرض است
این متن اصلی 75 درصد کدورت است
این متن اصلی 50 درصد کدورت است
این متن اصلی 25 درصد کدورت است
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

اختصاصی

گاهی اوقات به دلیل ویژگی انتخابگر دیگری نمی توان کلاس های متنی را اعمال کرد. در برخی موارد، یک راه حل کافی این است که محتوای عنصر خود را در یک <div>عنصر معنایی یا بیشتر با کلاس مورد نظر قرار دهید.

ساس

علاوه بر قابلیت‌های Sass زیر، خواندن ویژگی‌های سفارشی CSS (معروف به متغیرهای CSS) برای رنگ‌ها و موارد دیگر را در نظر بگیرید.

متغیرها

بیشتر colorبرنامه‌های کاربردی توسط رنگ‌های تم ما تولید می‌شوند که از متغیرهای پالت رنگ عمومی ما تخصیص داده می‌شوند.

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;
$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

رنگ‌های خاکستری نیز در دسترس هستند، اما تنها یک زیر مجموعه برای تولید هر گونه ابزار استفاده می‌شود.

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

نقشه

سپس رنگ‌های تم در نقشه Sass قرار می‌گیرند تا بتوانیم روی آنها حلقه بزنیم تا برنامه‌های کاربردی، اصلاح‌کننده‌های مؤلفه و موارد دیگر را تولید کنیم.

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

رنگ های خاکستری نیز به عنوان نقشه Sass در دسترس هستند. این نقشه برای تولید هیچ گونه برنامه کاربردی استفاده نمی شود.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

رنگ‌های RGB از یک نقشه Sass جداگانه تولید می‌شوند:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

و کدورت‌های رنگی با نقشه‌ای که توسط API ابزار مصرف می‌شود، بر روی آن ایجاد می‌شوند:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

Utilities API

ابزارهای رنگی در API ابزارهای ما در اعلان شده اند scss/_utilities.scss. با نحوه استفاده از Utilities API آشنا شوید.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),