באַדזשיז

דאַקיומענטיישאַן און ביישפילן פֿאַר באַדזשיז, אונדזער קליין ציילן און לייבלינג קאָמפּאָנענט.

אויף דעם בלאַט

ביישפילן

באַדזשיז וואָג צו גלייַכן די גרייס פון די באַלדיק פאָטער עלעמענט דורך ניצן קאָרעוו שריפֿט סייזינג און 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

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, באַדזשיז איצט נוצן היגע CSS וועריאַבאַלז .badgeפֿאַר ימפּרוווד פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

  --#{$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};

סאָס וועריאַבאַלז

$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;