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