Тэмдгүүд

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

Жишээ

emХарьцангуй үсгийн хэмжээ болон нэгжийг ашиглан тэмдэгтүүдийг шууд эх элементийн хэмжээтэй тааруулахын тулд масштаблана .

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

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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

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

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

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

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Контекстийн өөрчлөлтүүд

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

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

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

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

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

Эмийн тэмдэг

.badge-pillТэмдэгтүүдийг илүү бөөрөнхий болгохын тулд өөрчлөгч классыг ашиглана уу (илүү том , border-radiusнэмэлт хэвтээ padding). Хэрэв та v3-ийн тэмдгийг орхисон бол хэрэг болно.

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

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

Холбоосууд

Элемент дээрх контекст .badge-*ангиудыг ашигласнаар хулганаа аваачиж, анхаарлаа төвлөрүүлэх төлөв бүхий үйлдэл хийх боломжтой тэмдгийг хурдан<a> өгнө .

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

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>