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

html

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

html

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

html

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

html

<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

v5.2.0-n gehitua

Ezarri lehen planobackground-color kontrastatua gurecolor laguntzaileekin . Lehenago zure aukera eta estilorako utilitateak eskuz parekatu behar ziren , nahiago baduzu oraindik erabil ditzakezu..text-bg-{color}.text-{color}.bg-{color}

Lehen mailakoa Bigarren mailakoa Arrakasta Arriskua Abisua Info Argia Iluna

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren zati gisa, txapak orain CSS aldagai lokalak erabiltzen dituzte .badgedenbora errealean pertsonalizatzeko. CSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

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;