Bràistean

Sgrìobhainnean agus eisimpleirean airson bràistean, an àireamh bheag againn agus an earrann labeling.

eisimpleir

Sgèile bràistean gus a bhith co-ionnan ri meud na h-eileamaid phàrant sa bhad le bhith a’ cleachdadh meud cruth-clò càirdeach agus emaonadan.

Ceann-uidhe eisimpleirÙr

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

Faodar bràistean a chleachdadh mar phàirt de cheanglaichean no putanan gus cuntair a sholarachadh.

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

Thoir an aire, a rèir mar a thèid an cleachdadh, gum faodadh bràistean a bhith troimh-a-chèile do luchd-cleachdaidh leughadairean sgrion agus teicneòlasan taice coltach ris. Fhad ‘s a tha stoidhle nam bràistean a’ toirt sealladh lèirsinneach air an adhbhar, cha tèid ach susbaint a’ bhràiste a thoirt don luchd-cleachdaidh sin. A rèir an t-suidheachaidh shònraichte, faodaidh na bràistean sin a bhith coltach ri faclan no àireamhan a bharrachd air thuaiream aig deireadh seantans, ceangal, no putan.

Mura h-eil an co-theacsa soilleir (mar eisimpleir “Fios", far a bheilear a’ tuigsinn gur e an “4” an àireamh de fhiosan), beachdaich air a bhith a’ toirt a-steach co-theacsa a bharrachd le pìos teacsa a bharrachd a tha falaichte gu fradharcach.

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

Caochlaidhean co-theacsail

Cuir gin de na clasaichean atharrachaidh gu h-ìosal ris gus coltas bràiste atharrachadh.

Bun-sgoil Àrd-sgoile Soirbheachas Cunnart Rabhadh Fiosrachadh Solas Dorch

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

A’ toirt brìgh do theicneòlasan cuideachail

Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ris ach a’ toirt seachad sealladh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil fiosrachadh air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (me an teacsa faicsinneach), no air a thoirt a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .sr-onlychlas.

Bràistean pill

Cleachd an .badge-pillclas mion-atharrachaidh gus bràistean a dhèanamh nas cruinne (le border-radiuscòmhnard nas motha agus a bharrachd padding). Feumail ma chailleas tu na bràistean bho v3.

Bun-sgoil Àrd-sgoile Soirbheachas Cunnart Rabhadh Fiosrachadh Solas Dorch

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

Ceanglaichean

.badge-*Le bhith a’ cleachdadh nan clasaichean co-theacsail air <a>eileamaid thoir seachad bràistean a ghabhas obrachadh gu sgiobalta le hover agus stàitean fòcas.

Bun-sgoil Àrd-sgoile Soirbheachas Cunnart Rabhadh Fiosrachadh Solas Dorch

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