ባጆች
ሰነዶች እና ምሳሌዎች ለባጅ፣ የእኛ ትንሽ ቆጠራ እና መለያ ክፍል።
ምሳሌዎች
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>
የበስተጀርባ ቀለሞች
የባጅን መልክ በፍጥነት ለመቀየር የእኛን የጀርባ መገልገያ ክፍሎችን ይጠቀሙ። እባክዎን የ Bootstrapን ነባሪ ሲጠቀሙ ለትክክለኛው የቅጥ አሰራር .bg-light
አይነት የጽሑፍ ቀለም መገልገያ ያስፈልጎታል ። .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;