Txapak

Dokumentazioa eta txapeletarako adibideak, gure zenbaketa txikia eta etiketatze osagaia.

Adibidea

Berehalako elementu nagusiaren tamainarekin bat egiteko eskalatzen dira txapak letra-tipoen tamaina eta emunitate erlatiboak erabiliz.

Adibide goiburuaBerria

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

Testuinguruaren aldaerak

Gehitu behean aipatutako modifikatzaile klaseetako bat bereizgarri baten itxura aldatzeko.

Lehen mailakoa Bigarren mailakoa Arrakasta Arriskua Abisua Info Argia Iluna

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

Pilulen txapak

Erabili .badge-pillmodifikatzaile klasea bereizgarriak biribilduagoak egiteko ( border-radiushorizontal handiagoa eta gehigarriarekin padding). Erabilgarria v3-ko txapak galtzen badituzu.

Lehen mailakoa Bigarren mailakoa Arrakasta Arriskua Abisua Info Argia Iluna

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

Estekak

Testuinguru .badge-*-klaseak <a>elementu batean erabiltzeak bizkor ematen ditu pasabide- eta fokatze-egoerak dituzten bereizgarriak.

Lehen mailakoa Bigarren mailakoa Arrakasta Arriskua Abisua Info Argia Iluna

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