Beji

Nyaraka na mifano ya beji, hesabu yetu ndogo na sehemu ya lebo.

Katika ukurasa huu

Mifano

Beji hupimwa ili kulingana na ukubwa wa kipengele cha mzazi kwa kutumia saizi na emvizio vya fonti. Kufikia v5, beji hazina tena mitindo ya kulenga au kuelea kwa viungo.

Vichwa

Mfano wa kichwaMpya

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>

Vifungo

Beji zinaweza kutumika kama sehemu ya viungo au vifungo ili kutoa kaunta.

html

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

Kumbuka kuwa kulingana na jinsi zinavyotumiwa, beji zinaweza kuwachanganya watumiaji wa visoma skrini na teknolojia sawa za usaidizi. Ingawa mtindo wa beji unatoa kidokezo cha kuona kuhusu madhumuni yao, watumiaji hawa watawasilishwa tu na maudhui ya beji. Kulingana na hali mahususi, beji hizi zinaweza kuonekana kama maneno au nambari za ziada bila mpangilio mwishoni mwa sentensi, kiungo au kitufe.

Isipokuwa muktadha ni wazi (kama ilivyo kwa mfano wa "Arifa", ambapo inaeleweka kuwa "4" ni idadi ya arifa), zingatia kujumuisha muktadha wa ziada na kipande cha maandishi cha ziada kinachoonekana.

Imewekwa

Tumia huduma kurekebisha a .badgena kuiweka kwenye kona ya kiungo au kitufe.

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>

Unaweza pia kubadilisha .badgedarasa na huduma chache zaidi bila hesabu kwa kiashiria cha kawaida zaidi.

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>

Rangi za mandharinyuma

Imeongezwa katika v5.2.0

Weka mandhari ya background-colormbele yenye tofauti colorna wasaidizi wetu.text-bg-{color} . Hapo awali ilihitajika kuoanisha mwenyewe chaguo lako .text-{color}na .bg-{color}huduma za kupiga maridadi, ambazo bado unaweza kutumia ukipenda.

Msingi Sekondari Mafanikio Hatari Onyo Habari Mwanga Giza

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>

Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .visually-hiddendarasa.

Beji za vidonge

Tumia .rounded-pilldarasa la matumizi kutengeneza beji zenye mviringo zaidi na kubwa zaidi border-radius.

Msingi Sekondari Mafanikio Hatari Onyo Habari Mwanga Giza

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

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mbinu ya mabadiliko ya vigeu vya CSS ya Bootstrap, beji sasa zinatumia viwezo vya ndani vya CSS .badgeili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

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

Vigezo vya 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;