Тэмдгүүд

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

Жишээ

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>