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

<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.

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

Hubadhaa, akkaataa itti fayyadama isaanii irratti hundaa’uun, baajiiwwan fayyadamtoota dubbistoota iskiriinii fi teeknooloojiiwwan gargaarsaa walfakkaatan burjaajessu 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.

<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 caalaaf lakkoofsa malee gita faayidaa muraasa dabalataatiin bakka buusuu dandeessa .

<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

Bifa baajii saffisaan jijjiiruuf gitaalee faayidaa duubbee keenya fayyadami. Hubadhu yeroo Bootstrap's default fayyadamtu , faayidaa halluu barruu akka akkaataa sirrii ta'eef .bg-lightsi barbaachisuu hin oolu . .text-darkKunis kan ta'eef faayidaan duubbee background-color.

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

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge 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

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

Sass jedhama

Jijjiiramoota

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