צבעים

העברת משמעות באמצעות colorקומץ שיעורי שימוש בצבע. כולל גם תמיכה בעיצוב קישורים עם מצבי ריחוף.

בעמוד זה

צבעים

צבע טקסט עם כלי עזר צבע. אם אתה רוצה לצבוע קישורים, אתה יכול להשתמש .link-*בכיתות העוזר שיש להם :hoverומדינות :focus.

.text-primary

.טקסט משני

.טקסט-הצלחה

.טקסט-סכנה

אזהרת טקסט

‎.text-info

.טקסט-אור

.טקסט כהה

.text-body

.טקסט מושתק

.טקסט-לבן

.text-black-50

.text-white-50

html

<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% אטימות

html

<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% אטימות

html

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

API של Utilities

כלי עזר צבע מוצהרים ב-API של כלי עזר שלנו ב- scss/_utilities.scss. למד כיצד להשתמש בממשק ה-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
      )
    ),