Baajiiwwan

Dokumantarii fi fakkeenyota baajiidhaaf, qaama lakkoofsa xiqqaa fi asxaa keenyaa.

Fuula kana irratti

Fakkeenyaaf

emBaajiiwwan safara qubee firaakshinii fi yuunitii fayyadamuun hammangaa qaama warra battalaa walsimsiisuuf iskeelii . v5 irraa eegalee, baaajiiwwan kana booda akkaataa xiyyeeffannoo ykn hover hidhamtootaaf hin qaban.

Mata dureewwan

Fakkeenya mata dureeHaaraa

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>

Qabduulee

Baajiiwwan akka qaama hidhannoo ykn buttooniitti fayyadamuun lakkaawwii kennuu ni danda'ama.

html

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

Hubadhaa, akkaataa itti fayyadama isaanii irratti hundaa’uun, baajiiwwan fayyadamtoota dubbistoota iskiriinii fi teeknooloojiiwwan gargaarsaa walfakkaatan burjaaja’uu danda’u. Akkaataan baajii kaayyoo isaanii ilaalchisee agarsiisa mul’ataa kan kennu yoo ta’u, fayyadamtoonni kun qabiyyee baajii sanaa salphaatti ni dhiyaatu. Haala addaa irratti hundaa’uun, baaajiiwwan kun jechoota dabalataa tasaa ykn lakkoofsa dhuma hima, hidhaa ykn qaree tokkoo irratti argaman fakkaachuu danda’u.

Yoo haalli ibsame ifa ta’e malee (akkuma fakkeenya “Beeksisa”, bakka “4” baay’ina beeksisa ta’uu isaa hubatamutti), yaada dabalataa barreeffama dabalataa mul’ataan dhokate waliin hammachuu yaadaa.

Ejjennoo qaba

Faayidaa fayyadamii a fooyyessuu .badgefi golee hidhaa ykn qaree keessa kaa'i.

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>

.badgeAkkasumas agarsiisa waliigalaa caalaadhaaf lakkoofsa malee gita faayidaa muraasa dabalataatiin bakka buusuu dandeessa .

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>

Halluuwwan duubaa

v5.2.0 keessatti dabalameera

Gargaartoota keenya waliin background-colorfuulduraa walfaallaa ta'een a kaa'i . Duraan filannoo kee fi faayidaa istaayiliif harkaan wal-qabsiisuun barbaachisaa ture , kan ammas yoo barbaadde fayyadamuu dandeessa.color.text-bg-{color}.text-{color}.bg-{color}

Sadarkaa tokkoffaa Sadarkaa lammaffaa Milkaa'ina Hamaa Akeekkachiisa Info Ifa Duukkana

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>

Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .visually-hiddengita waliin dhokatee.

Baajiiwwan kiniinii

.rounded-pillBaajiiwwan guddaa ta'een akka geengoo ta'an gochuuf gita faayidaa fayyadami border-radius.

Sadarkaa tokkoffaa Sadarkaa lammaffaa Milkaa'ina Hamaa Akeekkachiisa Info Ifa Duukkana

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 jedhamuun beekama

Jijjiiramoota

v5.2.0 keessatti dabalameera

Akka qaama itti dhiyaannaa jijjiiramoota CSS Bootstrap guddachaa jiranitti, baaajiiwwan amma jijjiiramoota CSS naannoo on fayyadama .badgedhuunfachiisa yeroo dhugaa fooyya'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

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

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