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). נוציק אויב איר פאַרפירן די באַדזשיז פון וו3.

ערשטיק צווייטיק הצלחה געפאַר ווארענונג אינפֿאָרמאַציע ליכט טונקל
<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>