Тэмдгүүд
Тэмдгийн баримт бичиг, жишээнүүд, бидний жижиг тоолол, шошгоны бүрэлдэхүүн хэсэг.
Жишээ
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-light
Bootstrap-ийн өгөгдмөл тохиргоог ашиглах үед танд .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;