ባጆች

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

በዚህ ገጽ ላይ

ምሳሌዎች

emአንጻራዊ ቅርጸ-ቁምፊ መጠን እና አሃዶችን በመጠቀም ባጆች የቅርቡ የወላጅ አካል መጠንን ለማዛመድ ይለካሉ ። ከv5 ጀምሮ፣ ባጆች ለአገናኞች የትኩረት ወይም የማንዣበብ ቅጦች የላቸውም።

ርዕሶች

የምሳሌ ርዕስአዲስ

html

<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>

አዝራሮች

ቆጣሪ ለማቅረብ ባጆች እንደ አገናኞች ወይም አዝራሮች አካል ሆነው ሊያገለግሉ ይችላሉ።

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

እንደ አጠቃቀሙ ላይ በመመስረት ባጆች ለስክሪን አንባቢ ተጠቃሚዎች እና ተመሳሳይ አጋዥ ቴክኖሎጂዎች ግራ ሊጋቡ እንደሚችሉ ልብ ይበሉ። የባጃጆች አጻጻፍ ዓላማቸውን በተመለከተ ምስላዊ ፍንጭ የሚሰጥ ቢሆንም፣ እነዚህ ተጠቃሚዎች ከባጁ ይዘት ጋር በቀላሉ ይቀርባሉ። እንደ ልዩ ሁኔታው እነዚህ ባጆች በአረፍተ ነገር፣ አገናኝ ወይም አዝራር መጨረሻ ላይ የዘፈቀደ ተጨማሪ ቃላት ወይም ቁጥሮች ሊመስሉ ይችላሉ።

ዐውደ-ጽሑፉ ግልጽ ካልሆነ በስተቀር (እንደ “ማሳወቂያዎች” ምሳሌ፣ “4” የማሳወቂያዎች ብዛት እንደሆነ ከተረዳ) በምስላዊ የተደበቀ ተጨማሪ ጽሑፍ ተጨማሪ አውድ ማካተት ያስቡበት።

የተቀመጠ

ሀን ለማሻሻል መገልገያዎችን ተጠቀም .badgeእና በአገናኝ ወይም አዝራር ጥግ ላይ አስቀምጠው።

html

<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ለተጨማሪ አጠቃላይ አመልካች ሳይቆጠር ክፍሉን በጥቂት ተጨማሪ መገልገያዎች መተካት ይችላሉ ።

html

<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>

የበስተጀርባ ቀለሞች

በ v5.2.0 ውስጥ ተጨምሯል

ከረዳቶቻችን ጋር background-colorበተቃራኒ የፊት ገጽ ያዘጋጁ ። ከዚህ ቀደም የእርስዎን ምርጫ እና መገልገያዎችን ለቅጥ አሰራር ማጣመር ይጠበቅብዎታል ፣ አሁንም ከመረጡ ሊጠቀሙበት ይችላሉ።color.text-bg-{color}.text-{color}.bg-{color}

ዋና ሁለተኛ ደረጃ ስኬት አደጋ ማስጠንቀቂያ መረጃ ብርሃን ጨለማ

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

ትርጉምን ለመጨመር ቀለምን መጠቀም ምስላዊ ማሳያን ብቻ ያቀርባል, ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች. በቀለም የተወከለው መረጃ ከይዘቱ (ለምሳሌ ከሚታየው ጽሑፍ) ግልጽ መሆኑን ወይም በአማራጭ ዘዴዎች መካተቱን ያረጋግጡ፣ ለምሳሌ .visually-hiddenከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።

የፒል ባጆች

.rounded-pillባጆች በትልቁ የተጠጋጋ ለማድረግ የፍጆታ ክፍሉን ይጠቀሙ border-radius።

ዋና ሁለተኛ ደረጃ ስኬት አደጋ ማስጠንቀቂያ መረጃ ብርሃን ጨለማ

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

ተለዋዋጮች

በ v5.2.0 ውስጥ ተጨምሯል

እንደ የ Bootstrap የ CSS ተለዋዋጮች አቀራረብ አካል፣ ባጆች አሁን .badgeለተሻሻለ ቅጽበታዊ ማበጀት የአካባቢያዊ CSS ተለዋዋጮችን ይጠቀማሉ። የCSS ተለዋዋጮች እሴቶች በ Sass በኩል ተቀናብረዋል፣ ስለዚህ Sass ማበጀት አሁንም ይደገፋል።

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass ተለዋዋጮች

$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;