బ్యాడ్జ్‌లు

బ్యాడ్జ్‌ల కోసం డాక్యుమెంటేషన్ మరియు ఉదాహరణలు, మా చిన్న కౌంట్ మరియు లేబులింగ్ భాగం.

ఈ పేజీలో

ఉదాహరణలు

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" అనేది నోటిఫికేషన్‌ల సంఖ్య అని అర్థం చేసుకుంటే), దృశ్యమానంగా దాచబడిన అదనపు టెక్స్ట్ ముక్కతో అదనపు సందర్భాన్ని చేర్చడాన్ని పరిగణించండి.

స్థానం కల్పించారు

aని సవరించడానికి .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లో జోడించబడింది

బూట్‌స్ట్రాప్ యొక్క అభివృద్ధి చెందుతున్న 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};

సాస్ వేరియబుల్స్

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