Source

Badges

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

Mînak

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.

Sernavê nimûne Nşh
Sernavê nimûne Nşh
Sernavê nimûne Nşh
Sernavê nimûne Nşh
Sernavê nimûne Nşh
Sernavê nimûne Nşh
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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

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

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Guhertoyên hevoksaziyê

Yek ji dersên guhêrbar ên ku li jêr hatine destnîşan kirin zêde bikin da ku xuyangê nîşanek biguhezînin.

Bingehîn Dûwemdor Serketinî Talûke Gazî Info Sivik Tarî
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-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 .sr-onlypolê re veşartî ye.

Nîşanên heban

Dersa guhêrbar bikar bînin .badge-pillda ku nîşanan dortir bikin (bi border-radiushorîzontalek mezintir û zêde padding). Heke hûn nîşaneyên ji v3-ê ji bîr nekin bikêr e.

Bingehîn Dûwemdor Serketinî Talûke Gazî Info Sivik Tarî
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Bikaranîna .badge-*dersên kontekstê yên li ser <a>hêmanek zû nîşaneyên çalak bi hal û balê re peyda dike.

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>