צבעים
העברת משמעות באמצעות צבע עם קומץ שיעורי שימוש בצבע. כולל גם תמיכה בעיצוב קישורים עם מצבי ריחוף.
התמודדות עם ספציפיות
לפעמים לא ניתן להחיל מחלקות הקשריות בגלל הספציפיות של בורר אחר. במקרים מסוימים, פתרון מספיק הוא לעטוף את תוכן האלמנט שלך ב-a <div>
with the class.
העברת משמעות לטכנולוגיות מסייעות
שימוש בצבע להוספת משמעות מספק רק אינדיקציה ויזואלית, שלא תועבר למשתמשים בטכנולוגיות מסייעות - כמו קוראי מסך. ודא שהמידע המסומן בצבע ברור מהתוכן עצמו (למשל הטקסט הגלוי), או כלול באמצעים חלופיים, כגון טקסט נוסף מוסתר .sr-only
בכיתה.
צֶבַע
.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">.text-warning</p>
<p class="text-info">.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-white
ו .text-muted
אין סגנון קישור נוסף מעבר לקו התחתון.
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
צבע רקע
בדומה למחלקות צבע הטקסט ההקשרי, הגדר בקלות את הרקע של אלמנט לכל מחלקה הקשרית. רכיבי עוגן יתכהה בעת ריחוף, בדיוק כמו מחלקות הטקסט. כלי עזר ברקע אינם מוגדריםcolor
, כך שבמקרים מסוימים תרצה להשתמש .text-*
בכלי עזר.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
שיפוע רקע
כאשר $enable-gradients
מוגדר ל true
(ברירת המחדל היא false
), אתה יכול להשתמש .bg-gradient-
במחלקות שירות. למד על האפשרויות של Sass שלנו כדי להפעיל שיעורים אלה ועוד.
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark