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