Shenjat
Dokumentacion dhe shembuj për distinktivët, numërimin tonë të vogël dhe komponentin e etiketimit.
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 em
një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
Shembull i titullitI ri
Shembull i titullitI ri
Shembull i titullitI ri
Shembull i titullitI ri
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ë .badge
dhe 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 .badge
klasë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-dark
për stilimin e duhur. Kjo është për shkak se shërbimet e sfondit nuk vendosin asgjë përveçse 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>
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-hidden
klasën.
Shenjat e pilulave
Përdorni .rounded-pill
klasën e shërbimeve për t'i bërë distinktivët më të rrumbullakosur me një më të madh 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
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;