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

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>

Cnaipí

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

html

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

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>

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

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>

Dathanna an chúlra

Curtha leis in v5.2.0

Socraigh background-colortulra codarsnachtacolor lenár gcúntóirí.text-bg-{color} . Roimhe seo bhí sé riachtanach do rogha .text-{color}agus .bg-{color}fóntais do stílithe a phéireáil de láimh, ar féidir leat iad a úsáid fós más fearr leat.

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

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>

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

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

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann suaitheantais athróga áitiúla CSS anois le .badgehaghaidh saincheaptha feabhsaithe fíor-ama. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

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

Athróga 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;