ബാഡ്ജുകൾ

ബാഡ്ജുകൾക്കുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും, ഞങ്ങളുടെ ചെറിയ എണ്ണവും ലേബലിംഗ് ഘടകവും.

ഈ പേജിൽ

ഉദാഹരണങ്ങൾ

ആപേക്ഷിക ഫോണ്ട് വലുപ്പവും 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>

പശ്ചാത്തല നിറങ്ങൾ

ഒരു ബാഡ്ജിന്റെ രൂപം വേഗത്തിൽ മാറ്റാൻ ഞങ്ങളുടെ പശ്ചാത്തല യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുക. ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡിഫോൾട്ട് ഉപയോഗിക്കുമ്പോൾ, ശരിയായ സ്‌റ്റൈലിംഗിനായി .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;