Nyşanlar
Nyşanlar üçin resminamalar we mysallar, kiçijik sanamak we bellikleme komponentimiz.
Mysallar
em
Nyş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
Mysal sözbaşyTäze
Mysal sözbaşyTäze
Mysal sözbaşyTäze
Mysal sözbaşyTäze
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
.badge
A üý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-dark
Sebäbi fon hyzmatlary başga hiç zat düzmeýär background-color
.
<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-hidden
synp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.
Nyşanlary dolduryň
.rounded-pill
Nyşanlary has ulurak tegelek etmek üçin peýdaly synpy ulanyň border-radius
.
<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;