Shenjat

Dokumentacion dhe shembuj për distinktivët, numërimin tonë të vogël dhe komponentin e etiketimit.

Në këtë faqe

Shembuj

Distinktivët shkallëzohen për të përputhur me madhësinë e elementit prind të menjëhershëm duke përdorur madhësinë dhe emnjësitë përkatëse të shkronjave. Që nga v5, distinktivët nuk kanë më stile përqendrimi ose qëndrimi pezull për lidhjet.

Titujt

Shembull i titullitI ri

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

Butonat

Shenjat mund të përdoren si pjesë e lidhjeve ose butonave për të siguruar një numërues.

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

Vini re se në varësi të mënyrës se si përdoren, distinktivët mund të jenë konfuz për përdoruesit e lexuesve të ekranit dhe teknologjive të ngjashme ndihmëse. Ndërsa stilimi i distinktivëve ofron një sugjerim vizual për qëllimin e tyre, këta përdorues thjesht do të prezantohen me përmbajtjen e distinktivit. Në varësi të situatës specifike, këto distinktivë mund të duken si fjalë ose numra shtesë të rastësishëm në fund të një fjalie, lidhjeje ose butoni.

Përveç nëse konteksti është i qartë (si me shembullin "Njoftimet", ku kuptohet se "4" është numri i njoftimeve), merrni parasysh përfshirjen e kontekstit shtesë me një pjesë të fshehur vizualisht të tekstit shtesë.

I pozicionuar

Përdorni programet ndihmëse për të modifikuar një .badgedhe për ta vendosur atë në cep të një lidhjeje ose butoni.

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

Ju gjithashtu mund ta zëvendësoni .badgeklasën me disa shërbime të tjera pa numërim për një tregues më të përgjithshëm.

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

Ngjyrat e sfondit

Përdorni klasat tona të shërbimeve në sfond për të ndryshuar shpejt pamjen e një distinktiv. Ju lutemi vini re se kur përdorni parazgjedhjen e Bootstrap .bg-light, ka të ngjarë të keni nevojë për një mjet për ngjyrat e tekstit si .text-darkpër stilimin e duhur. Kjo është për shkak se shërbimet e sfondit nuk vendosin asgjë përveçse background-color.

fillore E mesme Sukses Rrezik Paralajmërim Informacion Drita E errët

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

Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .visually-hiddenklasën.

Shenjat e pilulave

Përdorni .rounded-pillklasën e shërbimeve për t'i bërë distinktivët më të rrumbullakosur me një më të madh border-radius.

fillore E mesme Sukses Rrezik Paralajmërim Informacion Drita E errët

<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

Variablat

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