Nyşanlar

Nyşanlar üçin resminamalar we mysallar, kiçijik sanamak we bellikleme komponentimiz.

Bu sahypada

Mysallar

emNyşanlar şrift ölçeglerini we birliklerini ulanyp, derrew esasy elementiň ululygyna laýyk gelýär . V5-e görä, nyşanlarda indi fokus ýa-da baglanyşyk üçin stil ýok.

Ingsazgylar

Mysal sözbaşyTäze

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

Düwmeler

Nyşanlary hasaplaýjy üpjün etmek üçin baglanyşyklaryň ýa-da düwmeleriň bölegi hökmünde ulanyp bolýar.

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

Ulanylyşyna baglylykda nyşanlaryň ekran okyjylary we şuňa meňzeş kömekçi tehnologiýalary ulanyjylar üçin bulaşyk bolup biljekdigine üns beriň. Nyşanlaryň bezegi, maksadyna göz ýetirmegi üpjün etse-de, bu ulanyjylara nyşanyň mazmuny hödürlener. Aýratyn ýagdaýa baglylykda bu nyşanlar sözlemiň, baglanyşygyň ýa-da düwmäniň soňundaky tötänleýin goşmaça sözler ýa-da sanlar ýaly bolup biler.

Kontekst düşnükli bolmasa (“Duýduryşlar” mysalynda bolşy ýaly, “4” habarnamanyň sanydygyna düşünilýär), goşmaça tekstiň göze görnüp duran bölegi bilen goşmaça mazmuny goşmagy göz öňünde tutuň.

Positionerleşýän

.badgeA üýtgetmek we baglanyşyk ýa-da düwmäniň burçunda ýerleşdirmek üçin kömekçi enjamlary ulanyň .

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

.badgeŞeýle hem has umumy görkezijini hasaplamazdan synpy ýene birnäçe kömekçi enjam bilen çalşyp bilersiňiz .

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

Fon reňkleri

Nyşanyň daşky görnüşini çalt üýtgetmek üçin fon peýdaly synplarymyzy ulanyň. “Bootstrap” -yň deslapky görnüşini ulananyňyzda , dogry dizaýn edilişi .bg-lightýaly tekst reňkli kömek gerek boljakdygyny ýadyňyzdan çykarmaň. .text-darkSebäbi fon hyzmatlary başga hiç zat düzmeýär background-color.

Başlangyç Ikinji Üstünlik Howp Duýduryş Maglumat Lightagtylyk Garaňky

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

Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .visually-hiddensynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Nyşanlary dolduryň

.rounded-pillNyşanlary has uly tegelek etmek üçin peýdaly synpy ulanyň border-radius.

Başlangyç Ikinji Üstünlik Howp Duýduryş Maglumat Lightagtylyk Garaňky

<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

Üýtgeýjiler

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