ബാഡ്ജുകൾ

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

ഈ പേജിൽ

ഉദാഹരണങ്ങൾ

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

സി.എസ്.എസ്

വേരിയബിളുകൾ

v5.2.0 ൽ ചേർത്തു

.badgeബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വികസിച്ചുകൊണ്ടിരിക്കുന്ന CSS വേരിയബിൾ സമീപനത്തിന്റെ ഭാഗമായി, മെച്ചപ്പെടുത്തിയ തത്സമയ ഇഷ്‌ടാനുസൃതമാക്കലിനായി ബാഡ്‌ജുകൾ ഇപ്പോൾ പ്രാദേശിക 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;