צבעים
העברת משמעות באמצעות color
קומץ שיעורי שימוש בצבע. כולל גם תמיכה בעיצוב קישורים עם מצבי ריחוף.
צבעים
צבע טקסט עם כלי עזר צבע. אם אתה רוצה לצבוע קישורים, אתה יכול להשתמש .link-*
בכיתות העוזר שיש להם :hover
ומדינות :focus
.
.text-primary
.טקסט משני
.טקסט-הצלחה
.טקסט-סכנה
אזהרת טקסט
.text-info
.טקסט-אור
.טקסט כהה
.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>
.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 המקומי בתוך כל מחלקה מונע בעיות בירושה כך שלמופעים מקוננים של כלי השירות אין אוטומטית שקיפות אלפא שונה.color
rgba(13, 110, 253, 1)
.text-*
דוגמא
כדי לשנות את האטימות הזו, בטל --bs-text-opacity
באמצעות סגנונות מותאמים אישית או סגנונות מוטבעים.
<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
מהשירותים:
<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
)
),