الألوان

نقل المعنى من خلال colorعدد قليل من فئات فائدة الألوان. يتضمن دعمًا لروابط التصميم مع حالات التمرير أيضًا.

على هذه الصفحة

الألوان

تلوين النص باستخدام أدوات مساعدة الألوان. إذا كنت ترغب في تلوين الروابط ، يمكنك استخدام .link-*الفئات المساعدة التي لها حالات :hoverوحالات :focus.

.text-Primary

.text-Secondary

.text-Success

.text-risk

.text-Warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.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>

الإيقاف: مع إضافة .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المحسوبة . يتجنب متغير CSS المحلي داخل كل فئة مشكلات التوريث ، لذا فإن المثيلات المتداخلة للأدوات المساعدة لا تحتوي تلقائيًا على شفافية ألفا معدلة.colorrgba(13, 110, 253, 1).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");

وتعتمد عتامة الألوان على ذلك من خلال الخريطة الخاصة بهم التي تستهلكها واجهة برمجة تطبيقات المرافق:

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

واجهة برمجة تطبيقات المرافق

يتم الإعلان عن أدوات الألوان في واجهة برمجة تطبيقات المرافق الخاصة بنا في scss/_utilities.scss. تعرف على كيفية استخدام واجهة برمجة تطبيقات المرافق.

    "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
      )
    ),