Source

תגים

תיעוד ודוגמאות לתגים, רכיב הספירה הקטנה והתיוג שלנו.

דוגמא

קנה מידה של תגים מתאים לגודל רכיב האב המיידי באמצעות גודל גופן 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>