Txapak
Dokumentazioa eta txapeletarako adibideak, gure zenbaketa txikia eta etiketatze osagaia.
Berehalako elementu nagusiaren tamainarekin bat egiteko eskalatzen dira txapak letra-tipoen tamaina eta emunitate erlatiboak erabiliz.
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>Txapak esteken edo botoien parte gisa erabil daitezke kontagailu bat emateko.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>Kontuan izan nola erabiltzen diren, txapak nahasgarriak izan daitezkeela pantaila-irakurgailuen eta antzeko laguntza-teknologien erabiltzaileentzat. Txaparen estiloak bere helburuari buruzko argibide bisuala ematen duen arren, erabiltzaile horiei txaparen edukia aurkeztuko zaie. Egoera zehatzaren arabera, txapa hauek ausazko hitz edo zenbaki osagarriak dirudite esaldi, esteka edo botoi baten amaieran.
Testuingurua argia izan ezean («Jakinarazpenak» adibidearekin gertatzen den bezala, non «4» jakinarazpen kopurua dela ulertzen den), kontuan izan testuinguru gehigarria sartzea bisualki ezkutuko testu gehigarri batekin.
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>Gehitu behean aipatutako modifikatzaile klaseetako bat bereizgarri baten itxura aldatzeko.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>Laguntza-teknologiei esanahia ematea
Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .sr-onlyklasearekin ezkutatuta dagoen testu gehigarria.
Erabili .badge-pillmodifikatzaile klasea bereizgarriak biribilduagoak egiteko ( border-radiushorizontal handiagoa eta gehigarriarekin padding). Erabilgarria v3-ko txapak galtzen badituzu.
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>Testuinguru .badge-*-klaseak <a>elementu batean erabiltzeak bizkor ematen ditu pasabide- eta fokatze-egoerak dituzten bereizgarriak.
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>