Txapak

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

Orrialde honetan

Adibideak

Berehalako elementu nagusiaren tamainarekin bat egiteko eskalatzen dira txapak letra-tipoen tamaina eta emunitate erlatiboak erabiliz. 5. bertsiotik aurrera, intsignek ez dute esteketarako foku edo pasatzeko estilorik.

Izenburuak

Adibide goiburuaBerria

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

Botoiak

Txapak esteken edo botoien parte gisa erabil daitezke kontagailu bat emateko.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">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.

Kokatuta

Erabili utilitateak a aldatzeko .badgeeta kokatzea esteka edo botoi baten izkinan.

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

Klasea erabilgarritasun batzuekin ordezka dezakezu .badgeadierazle generikoago baterako zenbatu gabe.

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

Atzeko planoko koloreak

Erabili gure atzeko planoko erabilgarritasun klaseak bereizgarri baten itxura azkar aldatzeko. Kontuan izan Bootstrap-en lehenetsia erabiltzen duzunean .bg-light, litekeena dela testu-kolorearen erabilgarritasun bat behar duzula .text-darkestilo egokirako. Hau da, atzeko planoko utilitateek ez dutelako ezer ezartzen background-color.

Lehen mailakoa Bigarren mailakoa Arrakasta Arriskua Abisua Info Argia Iluna

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

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 .visually-hiddenklasearekin ezkutatuta dagoen testu gehigarria.

Pilulen txapak

Erabili .rounded-pillerabilgarritasun-klasea txapak borobilagoak egiteko border-radius.

Lehen mailakoa Bigarren mailakoa Arrakasta Arriskua Abisua Info Argia Iluna

<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

Aldagaiak

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