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 që të përputhen 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

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>

Butonat

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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ë sinjal vizual për qëllimin e tyre, këta përdorues thjesht do t'u 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.

Nëse konteksti nuk ë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.

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>

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.

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>

Ngjyrat e sfondit

Shtuar në v5.2.0

Vendosni një background-colorplan të parë me kontrast colorme ndihmësit tanë.text-bg-{color} . Më parë kërkohej çiftimi manual i zgjedhjes suaj .text-{color}dhe .bg-{color}shërbimeve për stilim, të cilat mund t'i përdorni ende nëse preferoni.

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

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>

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

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

Variablat

Shtuar në v5.2.0

Si pjesë e qasjes në zhvillim të variablave CSS të Bootstrap, distinktivët tani përdorin variabla lokale CSS .badgepër personalizim të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

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

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