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

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

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

Air a shuidheachadh

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

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

<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

Cleachd na clasaichean cùl-fhiosrachaidh againn gus coltas bràiste atharrachadh gu sgiobalta. Thoir an aire, nuair a bhios tu a’ cleachdadh an rud bunaiteach aig Bootstrap, gu .bg-lightbheil coltas ann gum feum thu goireas dath teacsa mar .text-darkairson stoidhle ceart. Tha seo air sgàth nach eil goireasan cùl-fhiosrachaidh a’ suidheachadh dad ach background-color.

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

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

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

<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

Caochlaidhean

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