ባጆች
ሰነዶች እና ምሳሌዎች ለባጅ፣ የእኛ ትንሽ ቆጠራ እና መለያ ክፍል።
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>