Baajii

Iwe ati awọn apẹẹrẹ fun awọn baaji, kika kekere wa ati paati isamisi.

Lori iwe yi

Awọn apẹẹrẹ

Iwọn Baajii lati baamu iwọn ti ano obi lẹsẹkẹsẹ nipa lilo iwọn fonti ojulumo ati emawọn sipo. Bi ti v5, awọn baaji ko si ni idojukọ tabi awọn aṣa rababa fun awọn ọna asopọ.

Awọn akọle

Apeere akọleTuntun

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>

Awọn bọtini

Baajii le ṣee lo bi ara awọn ọna asopọ tabi awọn bọtini lati pese counter kan.

html

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

Ṣe akiyesi pe da lori bii wọn ṣe nlo wọn, awọn baagi le jẹ airoju fun awọn olumulo ti awọn oluka iboju ati iru awọn imọ-ẹrọ iranlọwọ. Lakoko ti iselona ti awọn baaji n pese ojulowo oju si idi wọn, awọn olumulo wọnyi yoo rọrun ni afihan pẹlu akoonu ti baaji naa. Ti o da lori ipo kan pato, awọn baaji wọnyi le dabi awọn ọrọ afikun tabi awọn nọmba laileto ni ipari gbolohun kan, ọna asopọ, tabi bọtini.

Ayafi ti ọrọ-ọrọ ba han gbangba (gẹgẹbi pẹlu apẹẹrẹ “Awọn iwifunni”, nibiti o ti loye pe “4” jẹ nọmba awọn iwifunni), ronu pẹlu ipo afikun pẹlu nkan ti o farapamọ oju ti ọrọ afikun.

Ni ipo

Lo awọn ohun elo lati yipada ki o .badgesi gbe e si igun ọna asopọ tabi bọtini.

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>

O tun le ropo .badgekilasi pẹlu kan diẹ diẹ igbesi lai a kika fun kan diẹ jeneriki Atọka.

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>

Awọn awọ abẹlẹ

Fi kun v5.2.0

Ṣeto a background-colorpẹlu itansan iwaju iwaju colorpẹlu awọn .text-bg-{color}oluranlọwọ wa . Ni iṣaaju o nilo lati ṣe alawẹ-meji yiyan rẹ .text-{color}ati .bg-{color}awọn ohun elo fun iselona, eyiti o tun le lo ti o ba fẹ.

Alakoko Atẹle Aseyori Ijamba Ikilo Alaye Imọlẹ Dudu

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>

Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .visually-hiddenkilasi naa.

Awọn aami oogun

Lo .rounded-pillkilasi IwUlO lati ṣe awọn baaji ni iyipo diẹ sii pẹlu nla kan border-radius.

Alakoko Atẹle Aseyori Ijamba Ikilo Alaye Imọlẹ Dudu

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

Awọn oniyipada

Fi kun v5.2.0

Gẹ́gẹ́ bí ara Bootstrap’s títúnṣe àwọn oníyípadà CSS, àwọn báàjì ń lo àwọn oniyipada CSS ti agbegbe .badgefun imudara isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

  --#{$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 oniyipada

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