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

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

<button type="button" class="btn btn-primary">
  Notifications <span class="badge 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.

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

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

Lo awọn kilasi IwUlO abẹlẹ lati yi irisi baaji pada ni iyara. Jọwọ ṣe akiyesi pe nigba lilo aiyipada Bootstrap .bg-light, o ṣee ṣe iwọ yoo nilo ohun elo awọ ọrọ bii .text-darkfun iselona to dara. Eyi jẹ nitori awọn ohun elo abẹlẹ ko ṣeto ohunkohun bikoṣe background-color.

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

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

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

<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

Awọn 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;