Bràistean

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

Air an duilleig seo

Eisimpleirean

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. Mar v5, chan eil stoidhlichean fòcas no hover aig bràistean airson ceanglaichean tuilleadh.

Cinn

Ceann-uidhe eisimpleirÙr

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>

Putanan

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">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, is dòcha gum bi na bràistean sin 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.

Air a shuidheachadh

Cleachd goireasan gus a atharrachadh .badgeagus a shuidheachadh ann an oisean ceangail no putan.

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>

Faodaidh tu cuideachd .badgebeagan ghoireasan a bharrachd a chuir an àite a’ chlas gun chunntas airson comharradh nas coitcheann.

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>

Dathan cùl-fhiosrachaidh

Air a chur ris ann an v5.2.0

Suidhich background-coloraghaidh aghaidh eadar-dhealaichte colorleis an luchd- cuideachaidh againn.text-bg-{color} . Roimhe sin bha e riatanach do roghainn .text-{color}agus .bg-{color}goireasan airson stoidhle a chàradh le làimh, a dh’ fhaodadh tu fhathast a chleachdadh mas fheàrr leat.

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

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>

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’ .visually-hiddenchlas.

Bràistean pill

Cleachd an .rounded-pillclas goireis gus bràistean a dhèanamh nas cruinne le border-radius.

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

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

Caochlaidhean

Air a chur ris ann an v5.2.0

Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap, tha bràistean a-nis a’ cleachdadh caochladairean CSS ionadail air adhart .badgeairson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.

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

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