Badges

Belgekirin û mînakên ji bo nîşanan, hejmartina meya piçûk û pêkhateya nîşankirinê.

Li ser vê rûpelê

Examples

emPîvana nîşanan bi karanîna mezinahiya tîpan û yekeyên têkildar bi mezinahiya hêmana dêûbavê yekser re li hev dikin. Ji v5-ê pê ve, nîşanan êdî ji bo girêdanan şêwazên balkişandinê an hilavêtinê tune.

Sernav

Sernavê nimûneNşh

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>

Buttons

Nîşan dikarin wekî beşek girêdan an bişkokan werin bikar anîn da ku jimarek peyda bikin.

html

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

Bala xwe bidinê ku li gorî ka ew çawa têne bikar anîn, dibe ku nîşanek ji bo bikarhênerên xwendevanên ekranê û teknolojiyên alîkar ên mîna wan tevlihev bibin. Digel ku şêwaza nîşanan ji bo armanca wan nîşanek dîtbarî peyda dike, dê van bikarhêneran bi tenê naveroka nîşanê bêne pêşkêş kirin. Bi rewşa taybetî ve girêdayî, dibe ku ev nîşanek mîna peyvên zêde an hejmarên bêserûber li dawiya hevokek, girêdan an bişkokê xuya bikin.

Heya ku çarçove zelal nebe (wek mînaka "Agahdarkirin", li cihê ku tê fêm kirin ku "4" hejmara ragihandinê ye), bi tevlêbûna çarçoveyek din a bi perçeyek nivîsa zêde ya veşartî ya dîtbar re bifikirin.

Positioned

Karûbaran bikar bînin da ku a biguhezînin .badgeû wê li quncikê girêdanek an bişkokek bi cih bikin.

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>

Her weha hûn dikarin .badgepolê bi çend karûbarên din re bêyî hejmartinek ji bo nîşanek gelemperî veguherînin.

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>

Rengên paşxanê

Di v5.2.0 de hate zêdekirin

Bi arîkarên me re pêşekek background-colorberevajî saz bikin . Berê hewce bû ku hûn bi destan bijartina xwe û karûbarên ji bo şêwazê bihev bikin, ku hûn hîn jî heke hûn tercîh bikin dikarin bikar bînin.color.text-bg-{color}.text-{color}.bg-{color}

Bingehîn Dûwemdor Serketinî Talûke Gazî Info Sivik Tarî

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>

Veguheztina wateya teknolojiyên arîkar

Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .visually-hiddenpolê re veşartî ye.

Nîşanên heban

Dersa karûbar bikar bînin .rounded-pillda ku nîşanekan bi mezintirîn dorpêktir bikin border-radius.

Bingehîn Dûwemdor Serketinî Talûke Gazî Info Sivik Tarî

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

Variables

Di v5.2.0 de hate zêdekirin

Wekî beşek ji nêzikbûna guhêrbarên CSS-ê yên pêşveçûyî yên Bootstrap, nîşangir naha guhêrbarên CSS-ê yên herêmî li ser .badgeji bo xwerûkirina rast-dema pêşkeftî bikar tînin. Nirxên ji bo guhêrbarên CSS bi Sass ve têne danîn, ji ber vê yekê xwerûkirina Sass hîn jî piştgirî ye.

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

Guherbarên 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;