Ženkliukai

Ženklelių, mūsų nedidelio skaičiaus ir ženklinimo komponento, dokumentacija ir pavyzdžiai.

Šiame puslapyje

Pavyzdžiai

Ženkliukai keičiasi pagal tiesioginio pirminio elemento dydį, naudojant santykinį šrifto dydį ir emvienetus. Nuo 5 versijos ženkleliai nebeturi nuorodų fokusavimo ar užvedimo stilių.

Antraštės

Antraštės pavyzdysNauja

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>

Mygtukai

Ženkliukai gali būti naudojami kaip nuorodų arba mygtukų dalis, kad būtų pateiktas skaitiklis.

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

Atminkite, kad atsižvelgiant į tai, kaip jie naudojami, ženkleliai gali suklaidinti ekrano skaitytuvų ir panašių pagalbinių technologijų naudotojus. Nors ženklelių stilius suteikia vaizdinį užuominą apie jų paskirtį, šiems vartotojams tiesiog bus pateiktas ženklelio turinys. Atsižvelgiant į konkrečią situaciją, šie ženkleliai gali atrodyti kaip atsitiktiniai papildomi žodžiai ar skaičiai sakinio, nuorodos ar mygtuko pabaigoje.

Jei kontekstas nėra aiškus (kaip „Pranešimų“ pavyzdyje, kai suprantama, kad „4“ yra pranešimų skaičius), apsvarstykite galimybę įtraukti papildomą kontekstą su vizualiai paslėpta papildomo teksto dalimi.

Padėtas

Naudokite paslaugų programas, kad pakeistumėte a .badgeir įdėkite jį nuorodos arba mygtuko kampe.

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>

Taip pat galite pakeisti .badgeklasę dar keliomis komunalinėmis paslaugomis, neskaičiuojant bendresnio rodiklio.

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>

Fono spalvos

Pridėta 5.2.0 versijoje

Su mūsų pagalbininkais nustatykite background-colorkontrastingą priekinį planą . Anksčiau buvo reikalaujama rankiniu būdu susieti savo pasirinkimą ir stiliaus formavimo priemones, kurias vis tiek galite naudoti, jei norite.color.text-bg-{color}.text-{color}.bg-{color}

Pirminis Antrinis Sėkmė Pavojus Įspėjimas Informacija Šviesa Tamsus

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>

Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .visually-hiddenklasėje.

Tablečių ženkleliai

Naudokite .rounded-pillnaudingumo klasę, kad ženkleliai būtų suapvalinti naudojant didesnį border-radius.

Pirminis Antrinis Sėkmė Pavojus Įspėjimas Informacija Šviesa Tamsus

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

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, ženkleliuose dabar naudojami vietiniai CSS kintamieji, .badgekad būtų galima patobulinti tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

  --#{$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 kintamieji

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