ബാഡ്ജുകൾ
ബാഡ്ജുകൾക്കുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും, ഞങ്ങളുടെ ചെറിയ എണ്ണവും ലേബലിംഗ് ഘടകവും.
ആപേക്ഷിക ഫോണ്ട് വലുപ്പവും 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>