ባጆች

ሰነዶች እና ምሳሌዎች ለባጅ፣ የእኛ ትንሽ ቆጠራ እና መለያ ክፍል።

በዚህ ገጽ ላይ

ምሳሌዎች

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;