Suaitheantais

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

Ar an leathanach seo

Samplaí

Scála suaitheantais chun méid na neasghné a mheaitseáil trí úsáid a bhaint as méid cló agus emaonaid choibhneasta. Ó v5, níl stíleanna fócais nó foluain ag suaitheantais le haghaidh naisc a thuilleadh.

Ceannteidil

Ceannteideal samplachNua

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

Cnaipí

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 bg-secondary">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.

Suite

Úsáid fóntais chun a a mhionathrú .badgeagus é a shuíomh i gcúinne naisc nó cnaipe.

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

Is féidir leat freisin .badgeroinnt fóntais eile a chur in ionad an ranga gan áireamh le haghaidh táscaire níos cineálaí.

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

Dathanna an chúlra

Bain úsáid as ár ranganna fóntais chúlra chun cuma suaitheantais a athrú go tapa. Tabhair faoi deara, le do thoil, agus réamhshocrú Bootstrap á úsáid .bg-lightagat, is dócha go mbeidh gá agat le fóntais datha téacs cosúil .text-darkle haghaidh stílithe cuí. Tá sé seo amhlaidh toisc nach socraíonn fóntais chúlra rud ar bith ach background-color.

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

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-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 .visually-hiddenrang.

Suaitheantais pill

Úsáid an .rounded-pillrang áirgiúlachta chun suaitheantais a dhéanamh níos cruinne le níos mó border-radius.

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

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

Sass

Athróga

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