Тэмдгүүд

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

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

Жишээ

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

Гарчиг

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

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

Товчлуурууд

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

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

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

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

Байршилтай

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

<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ангиудыг илүү ерөнхий үзүүлэлтээр тоолохгүйгээр хэд хэдэн хэрэглүүрээр сольж болно.

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

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

Тэмдгийн дүр төрхийг хурдан өөрчлөхийн тулд манай үндсэн хэрэглээний хичээлүүдийг ашиглана уу. .bg-lightBootstrap-ийн өгөгдмөл тохиргоог ашиглах үед танд .text-darkзөв загварчлахын тулд текстийн өнгөний хэрэгсэл хэрэгтэй болно гэдгийг анхаарна уу . Учир нь дэвсгэр хэрэгслүүд нь background-color.

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

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

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

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

Эмийн тэмдэг

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

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

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

Сасс

Хувьсагч

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