Тэмдгүүд

Тэмдгийн баримт бичиг, жишээнүүд, бидний жижиг тоолол, шошгоны бүрэлдэхүүн хэсэг.

Энэ хуудсан дээр

Жишээ

emХарьцангуй үсгийн хэмжээ болон нэгжийг ашиглан тэмдэгтүүдийг шууд эх элементийн хэмжээтэй тааруулахын тулд масштаблана . V5-аас хойш тэмдэгтүүд нь холбоосуудад зориулсан фокус эсвэл хулганын хэв маяггүй болсон.

Гарчиг

Жишээ гарчигШинэ

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>

Товчлуурууд

Тэмдгийг холбоос эсвэл товчлуурын нэг хэсэг болгон ашиглаж, тоолуураар хангах боломжтой.

html

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

Хэрхэн ашиглаж байгаагаас хамааран тэмдэг нь дэлгэц уншигч болон үүнтэй төстэй туслах технологийн хэрэглэгчдэд төөрөгдөл үүсгэж болзошгүйг анхаарна уу. Тэмдгийн хэв маяг нь тэдний зорилгыг харуулдаг боловч эдгээр хэрэглэгчдэд тэмдгийн агуулгыг танилцуулах болно. Тодорхой нөхцөл байдлаас шалтгаалан эдгээр тэмдэг нь өгүүлбэр, холбоос эсвэл товчлуурын төгсгөлд санамсаргүй нэмэлт үг эсвэл тоо мэт санагдаж болно.

Контекст тодорхой биш бол ("4" нь мэдэгдлийн тоо гэж ойлгогдох "Мэдэгдэл"-ийн жишээний адил) нүдээр далдалсан нэмэлт текст бүхий нэмэлт контекст оруулах талаар бодож үзээрэй.

Байршилтай

А-г өөрчлөхийн тулд хэрэгслүүдийг ашиглан .badgeхолбоос эсвэл товчлуурын буланд байрлуулна уу.

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>

Та мөн .badgeангиудыг илүү ерөнхий үзүүлэлтээр тоолохгүйгээр хэд хэдэн хэрэглүүрээр сольж болно.

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>

Арын дэвсгэр өнгө

5.2.0 хувилбар дээр нэмсэн

Манай туслахуудаарbackground-color ялгаатай урд талын colorзураг тавь . Өмнө нь загварчлахдаа өөрийн сонголт болон хэрэгслүүдийг гараар хослуулах шаардлагатай байсан бөгөөд хэрэв та хүсвэл үүнийг ашиглаж болно..text-bg-{color}.text-{color}.bg-{color}

Үндсэн Хоёрдогч Амжилт аюул Анхааруулга Мэдээлэл Гэрэл Харанхуй

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>

Туслах технологид утгыг дамжуулах

Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .visually-hiddenангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.

Эмийн тэмдэг

.rounded-pillТэмдгийг илүү томоор бөөрөнхий болгохын тулд хэрэглээний ангиллыг ашиглана уу border-radius.

Үндсэн Хоёрдогч Амжилт аюул Анхааруулга Мэдээлэл Гэрэл Харанхуй

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

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн арга барилын нэг хэсэг болгон тэмдэгтүүд нь .badgeбодит цагийн сайжруулсан тохиргоонд зориулж локал CSS хувьсагчдыг асаалттай ашиглаж байна. CSS хувьсагчийн утгыг Sass-ээр тохируулдаг тул Sass-н тохиргоог дэмжсэн хэвээр байна.

  --#{$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 хувьсагч

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