תגים

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

בעמוד זה

דוגמאות

קנה מידה של תגים מתאים לגודל רכיב האב המיידי באמצעות גודל גופן emויחידות יחסיים. החל מגרסה 5, לתגים כבר אין סגנונות מיקוד או ריחוף לקישורים.

כותרות

כותרת לדוגמהחָדָשׁ

html

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

כפתורים

ניתן להשתמש בתגים כחלק מקישורים או כפתורים כדי לספק מונה.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

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

אלא אם ההקשר ברור (כמו בדוגמה של "התראות", שבה מובן שה-"4" הוא מספר ההתראות), שקול לכלול הקשר נוסף עם קטע טקסט נוסף מוסתר ויזואלית.

ממוקם

השתמש בכלי עזר כדי לשנות .badgeולמקם אותו בפינת קישור או כפתור.

html

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

אתה יכול גם להחליף את .badgeהמחלקה בכמה כלי עזר נוספים ללא ספירה עבור אינדיקטור גנרי יותר.

html

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

צבעי רקע

נוסף בגרסה 5.2.0

הגדר background-colorחזית עם ניגודיות colorעם העוזרים שלנו.text-bg-{color} . בעבר היה צורך להתאים באופן ידני את בחירתך .text-{color}ואת .bg-{color}כלי העזר לעיצוב, שבהם עדיין תוכל להשתמש אם תעדיף.

יְסוֹדִי מִשׁנִי הַצלָחָה סַכָּנָה אַזהָרָה מידע אוֹר אפל

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

העברת משמעות לטכנולוגיות מסייעות

שימוש בצבע להוספת משמעות מספק רק אינדיקציה ויזואלית, שלא תועבר למשתמשים בטכנולוגיות מסייעות - כמו קוראי מסך. ודא שהמידע המסומן בצבע ברור מהתוכן עצמו (למשל הטקסט הגלוי), או כלול באמצעים חלופיים, כגון טקסט נוסף מוסתר .visually-hiddenבכיתה.

תגי גלולות

השתמש .rounded-pillבמחלקת השירות כדי להפוך את התגים למעוגלים יותר עם סמל גדול יותר border-radius.

יְסוֹדִי מִשׁנִי הַצלָחָה סַכָּנָה אַזהָרָה מידע אוֹר אפל

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

משתנים

נוסף בגרסה 5.2.0

כחלק מגישת משתני ה-CSS המתפתחת של Bootstrap, התגים משתמשים כעת במשתני CSS מקומיים .badgeלהתאמה אישית משופרת בזמן אמת. ערכים עבור משתני ה-CSS נקבעים באמצעות Sass, כך שגם התאמה אישית של Sass עדיין נתמכת.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

משתנים Sass

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;