Märgid
Märkide dokumentatsioon ja näited, meie väike arv ja märgistuskomponent.
Näited
Märgid skaleeruvad, et need vastaksid vahetu emaelemendi suurusele, kasutades suhtelist fondi suurust ja em
ühikuid. Alates versioonist 5 pole märkidel enam linkide fookus- ega hõljutusstiile.
Pealkirjad
NäidispealkiriUus
NäidispealkiriUus
NäidispealkiriUus
NäidispealkiriUus
NäidispealkiriUus
NäidispealkiriUus
<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>
Nupud
Märke saab kasutada loenduri loomiseks linkide või nuppude osana.
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
Pange tähele, et olenevalt kasutusviisist võivad märgid ekraanilugejate ja sarnaste abitehnoloogiate kasutajate jaoks segadusse ajada. Kuigi märkide stiil annab visuaalse vihje nende otstarbele, antakse neile kasutajatele lihtsalt märgi sisu. Olenevalt konkreetsest olukorrast võivad need märgid tunduda juhuslike lisasõnadena või -numbritena lause, lingi või nupu lõpus.
Kui kontekst pole selge (nagu näites „Teavitused”, kus mõistetakse, et „4” on teatiste arv), kaaluge täiendava konteksti lisamist visuaalselt peidetud lisatekstiga.
Positsioneeritud
Kasutage utiliite, et muuta a .badge
ja paigutada see lingi või nupu nurka.
<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>
Samuti saate .badge
klassi asendada veel mõne utiliidiga ilma üldisema indikaatori loendamata.
<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>
Taustavärvid
Kasutage meie tausta utiliidi klasse, et kiiresti muuta märgi välimust. Pange tähele, et kui kasutate Bootstrapi vaikeseadet .bg-light
, vajate tõenäoliselt tekstivärvi utiliiti, nagu .text-dark
õige stiili jaoks. Seda seetõttu, et taustautiliidid ei määra muud kui 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>
Abitehnoloogiate tähenduse edasiandmine
Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hidden
Veenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .
Pillide märgid
Kasutage .rounded-pill
kasuliku klassi, et muuta rinnamärgid suuremaga ümaramaks 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
Muutujad
$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;