നിറങ്ങൾ
ഒരുപിടി വർണ്ണ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് നിറത്തിലൂടെ അർത്ഥം അറിയിക്കുക. ഹോവർ സ്റ്റേറ്റുകളുള്ള സ്റ്റൈലിംഗ് ലിങ്കുകൾക്കുള്ള പിന്തുണയും ഉൾപ്പെടുന്നു.
.ടെക്സ്റ്റ്-പ്രൈമറി
.ടെക്സ്റ്റ്-സെക്കൻഡറി
.ടെക്സ്റ്റ്-വിജയം
.ടെക്സ്റ്റ്-അപകടം
.വാചകം-മുന്നറിയിപ്പ്
.ടെക്സ്റ്റ്-വിവരം
.ടെക്സ്റ്റ്-ലൈറ്റ്
.ടെക്സ്റ്റ്-ഇരുണ്ട
.വാചകം നിശബ്ദമാക്കി
.ടെക്സ്റ്റ്-വൈറ്റ്
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>നൽകിയിരിക്കുന്ന ഹോവർ, ഫോക്കസ് സ്റ്റേറ്റുകളുള്ള ആങ്കറുകളിലും സന്ദർഭോചിതമായ പാഠ ക്ലാസുകൾ നന്നായി പ്രവർത്തിക്കുന്നു. ക്ലാസിനും ലിങ്ക് സ്റ്റൈലിംഗും ഇല്ലെന്ന കാര്യം ശ്രദ്ധിക്കുക ..text-white.text-muted
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>സന്ദർഭോചിതമായ ടെക്സ്റ്റ് കളർ ക്ലാസുകൾക്ക് സമാനമായി, ഒരു എലമെന്റിന്റെ പശ്ചാത്തലം ഏത് സാന്ദർഭിക ക്ലാസിലേക്കും എളുപ്പത്തിൽ സജ്ജമാക്കുക. ടെക്സ്റ്റ് ക്ലാസുകൾ പോലെ ഹോവർ ചെയ്യുമ്പോൾ ആങ്കർ ഘടകങ്ങൾ ഇരുണ്ടുപോകും. പശ്ചാത്തല യൂട്ടിലിറ്റികൾ സജ്ജമാക്കിയിട്ടില്ലcolor , അതിനാൽ ചില സന്ദർഭങ്ങളിൽ നിങ്ങൾ .text-*യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കും.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>ശരി എന്ന് സജ്ജീകരിക്കുമ്പോൾ , $enable-gradientsനിങ്ങൾക്ക് .bg-gradient-യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കാനാകും. ഡിഫോൾട്ടായി, $enable-gradientsപ്രവർത്തനരഹിതമാക്കുകയും ചുവടെയുള്ള ഉദാഹരണം മനഃപൂർവ്വം തകർക്കുകയും ചെയ്യുന്നു. നിങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിക്കാൻ തുടങ്ങിയ നിമിഷം മുതൽ എളുപ്പമുള്ള ഇഷ്‌ടാനുസൃതമാക്കലിനായി ഇത് ചെയ്യുന്നു. ഈ ക്ലാസുകളും മറ്റും പ്രവർത്തനക്ഷമമാക്കുന്നതിനുള്ള ഞങ്ങളുടെ Sass ഓപ്ഷനുകളെക്കുറിച്ച് അറിയുക .
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>പ്രത്യേകതകൾ കൈകാര്യം ചെയ്യുന്നു
മറ്റൊരു സെലക്ടറിന്റെ പ്രത്യേകത കാരണം ചിലപ്പോൾ സന്ദർഭോചിതമായ ക്ലാസുകൾ പ്രയോഗിക്കാൻ കഴിയില്ല. <div>ചില സാഹചര്യങ്ങളിൽ, നിങ്ങളുടെ ഘടകത്തിന്റെ ഉള്ളടക്കം ക്ലാസിനൊപ്പം പൊതിയുക എന്നതാണ് മതിയായ പരിഹാരമാർഗം .
സഹായ സാങ്കേതികവിദ്യകളുടെ അർത്ഥം അറിയിക്കുന്നു
അർത്ഥം ചേർക്കാൻ വർണ്ണം ഉപയോഗിക്കുന്നത് ഒരു വിഷ്വൽ സൂചന നൽകുന്നു, അത് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് കൈമാറില്ല. വർണ്ണത്താൽ സൂചിപ്പിക്കുന്ന വിവരങ്ങൾ ഉള്ളടക്കത്തിൽ നിന്ന് തന്നെ വ്യക്തമാണെന്ന് ഉറപ്പാക്കുക (ഉദാ: ദൃശ്യമായ ടെക്സ്റ്റ്), അല്ലെങ്കിൽ .sr-onlyക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക വാചകം പോലെയുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.