Suaitheantais

Doiciméadú agus samplaí le haghaidh suaitheantais, ár gcomháireamh beag agus lipéadú.

Sampla

Scála suaitheantais chun méid na neasghné a mheaitseáil trí úsáid a bhaint as méid cló agus emaonaid choibhneasta.

Ceannteideal samplachNua

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

Is féidir suaitheantais a úsáid mar chuid de naisc nó cnaipí chun cuntar a sholáthar.

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

Tabhair faoi deara, ag brath ar an gcaoi a n-úsáidtear iad, go bhféadfadh go mbeadh mearbhall ar shuaitheantais d’úsáideoirí léitheoirí scáileáin agus teicneolaíochtaí cúnta dá samhail. Cé go dtugann stíliú na suaitheantais léargas amhairc ar a gcuspóir, ní thabharfar ach ábhar an suaitheantais do na húsáideoirí seo. Ag brath ar an gcás ar leith, d’fhéadfadh go mbeadh cuma ar na suaitheantais seo focail randamacha bhreise nó uimhreacha breise ag deireadh abairte, naisc, nó cnaipe.

Mura bhfuil an comhthéacs soiléir (mar atá leis an sampla “Fógraí”, áit a dtuigtear gurb é an “4” líon na bhfógraí), smaoinigh ar chomhthéacs breise a áireamh le píosa téacs breise atá i bhfolach ó thaobh amhairc de.

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

Athruithe comhthéacsúla

Cuir aon cheann de na ranganna mionathraithe thíos leis chun cuma suaitheantais a athrú.

Bunscoile Tánaisteach Rath Contúirt Rabhadh Eolas Solas Dorcha

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

Brí a chur in iúl do theicneolaíochtaí cúnta

Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá sainaitheanta leis an dath soiléir ón ábhar féin (m.sh. an téacs infheicthe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .sr-onlyrang.

Suaitheantais pill

Bain úsáid as an .badge-pillrang mionathraithe chun suaitheantais a dhéanamh níos cruinne (le border-radiuscothrománach níos mó agus breise padding). Úsáideach má chailleann tú na suaitheantais ó v3.

Bunscoile Tánaisteach Rath Contúirt Rabhadh Eolas Solas Dorcha

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

Naisc

.badge-*Ag baint úsáide as na ranganna comhthéacsúla ar <a>eilimint , cuir suaitheantais inghníomhaithe ar fáil go tapa le stáit hover agus fócas.

Bunscoile Tánaisteach Rath Contúirt Rabhadh Eolas Solas Dorcha

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