תגים
תיעוד ודוגמאות לתגים, רכיב הספירה הקטנה והתיוג שלנו.
קנה מידה של תגים מתאים לגודל רכיב האב המיידי באמצעות גודל גופן emויחידות יחסיים.
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>ניתן להשתמש בתגים כחלק מקישורים או כפתורים כדי לספק מונה.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>שימו לב כי בהתאם לאופן השימוש בהם, התגים עשויים לבלבל את המשתמשים בקוראי מסך ובטכנולוגיות מסייעות דומות. בעוד שהסגנון של התגים מספק רמז ויזואלי לגבי מטרתם, למשתמשים אלה פשוט יוצג תוכן התג. בהתאם למצב הספציפי, תגים אלה עשויים להיראות כמו מילים או מספרים אקראיים נוספים בסוף משפט, קישור או כפתור.
אלא אם ההקשר ברור (כמו בדוגמה של "התראות", שבה מובן שה-"4" הוא מספר ההתראות), שקול לכלול הקשר נוסף עם קטע טקסט נוסף מוסתר ויזואלית.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>הוסף כל אחת ממחלקות השינוי המוזכרות למטה כדי לשנות את המראה של תג.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>העברת משמעות לטכנולוגיות מסייעות
שימוש בצבע להוספת משמעות מספק רק אינדיקציה ויזואלית, שלא תועבר למשתמשים בטכנולוגיות מסייעות - כמו קוראי מסך. ודא שהמידע המסומן בצבע ברור מהתוכן עצמו (למשל הטקסט הגלוי), או כלול באמצעים חלופיים, כגון טקסט נוסף מוסתר .sr-onlyבכיתה.
השתמש .badge-pillבמחלקה של השינוי כדי להפוך את התגים למעוגלים יותר (עם border-radiusאופקי גדול יותר ונוסף padding). שימושי אם אתה מתגעגע לתגים מ-v3.
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>השימוש .badge-*בשיעורים ההקשריים על <a>אלמנט מספק במהירות תגים ניתנים לפעולה עם מצבי ריחוף ומיקוד.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>