പ്രോപ്പർട്ടി പ്രദർശിപ്പിക്കുക
ഞങ്ങളുടെ ഡിസ്പ്ലേ യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് ഘടകങ്ങളുടെയും മറ്റും പ്രദർശന മൂല്യം വേഗത്തിലും പ്രതികരണാത്മകമായും ടോഗിൾ ചെയ്യുക. കൂടുതൽ സാധാരണമായ ചില മൂല്യങ്ങൾക്കുള്ള പിന്തുണയും പ്രിന്റ് ചെയ്യുമ്പോൾ ഡിസ്പ്ലേ നിയന്ത്രിക്കുന്നതിനുള്ള ചില എക്സ്ട്രാകളും ഉൾപ്പെടുന്നു.
ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു
ഞങ്ങളുടെ പ്രതികരിക്കുന്ന ഡിസ്പ്ലേ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് displayപ്രോപ്പർട്ടി മൂല്യം മാറ്റുക . എന്നതിന് സാധ്യമായ എല്ലാ മൂല്യങ്ങളുടെയും ഒരു ഉപവിഭാഗത്തെ മാത്രമേ ഞങ്ങൾ മനഃപൂർവ്വം പിന്തുണയ്ക്കൂ display. നിങ്ങൾക്ക് ആവശ്യമുള്ളത്ര വ്യത്യസ്ത ഇഫക്റ്റുകൾക്കായി ക്ലാസുകൾ സംയോജിപ്പിക്കാൻ കഴിയും.
നൊട്ടേഷൻ
മുതൽ വരെയുള്ള എല്ലാ ബ്രേക്ക്‌പോയിന്റുകൾക്കും ബാധകമായ ഡിസ്പ്ലേ യൂട്ടിലിറ്റി ക്ലാസുകളിൽ അവയിൽ ബ്രേക്ക്‌പോയിന്റ് ചുരുക്കമില്ല. കാരണം, ആ ക്ലാസുകൾ മുകളിൽ നിന്നും മുകളിലേക്കും പ്രയോഗിക്കപ്പെടുന്നു, അതിനാൽ ഒരു മീഡിയ അന്വേഷണത്തിന് ബന്ധമില്ല. എന്നിരുന്നാലും, ശേഷിക്കുന്ന ബ്രേക്ക്‌പോയിന്റുകളിൽ ഒരു ബ്രേക്ക്‌പോയിന്റ് ചുരുക്കെഴുത്ത് ഉൾപ്പെടുന്നു.xsxlmin-width: 0;
അതുപോലെ, ക്ലാസുകൾക്ക് ഫോർമാറ്റ് ഉപയോഗിച്ചാണ് പേര് നൽകിയിരിക്കുന്നത്:
.d-{value}വേണ്ടിxs.d-{breakpoint}-{value}വേണ്ടിsm,md,lg, ഒപ്പംxl.
മൂല്യം ഇതിൽ ഒന്നാണ്:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
$displaysവേരിയബിൾ മാറ്റി SCSS വീണ്ടും കംപൈൽ ചെയ്യുന്നതിലൂടെ ഡിസ്പ്ലേ മൂല്യങ്ങൾ മാറ്റാവുന്നതാണ്.
തന്നിരിക്കുന്ന ബ്രേക്ക്‌പോയിന്റോ അതിൽ കൂടുതലോ ഉള്ള സ്‌ക്രീൻ വീതിയെ മീഡിയ അന്വേഷിക്കുന്നു . ഉദാഹരണത്തിന്, രണ്ടിലും സ്ക്രീനുകളിലും .d-lg-noneസെറ്റുകൾ .display: none;lgxl
ഉദാഹരണങ്ങൾ
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div><span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>ഘടകങ്ങൾ മറയ്ക്കുന്നു
വേഗത്തിലുള്ള മൊബൈൽ-സൗഹൃദ വികസനത്തിന്, ഉപകരണം മുഖേന ഘടകങ്ങൾ കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനുമായി പ്രതികരിക്കുന്ന ഡിസ്പ്ലേ ക്ലാസുകൾ ഉപയോഗിക്കുക. ഒരേ സൈറ്റിന്റെ തികച്ചും വ്യത്യസ്തമായ പതിപ്പുകൾ സൃഷ്‌ടിക്കുന്നത് ഒഴിവാക്കുക, പകരം ഓരോ സ്‌ക്രീൻ വലുപ്പത്തിലും ഘടകങ്ങൾ മറയ്ക്കുക.
ഘടകങ്ങൾ മറയ്‌ക്കുന്നതിന് , പ്രതികരിക്കുന്ന സ്‌ക്രീൻ വ്യതിയാനത്തിന് .d-noneക്ലാസ് അല്ലെങ്കിൽ ക്ലാസുകളിലൊന്ന് ഉപയോഗിക്കുക..d-{sm,md,lg,xl}-none
സ്‌ക്രീൻ വലുപ്പങ്ങളുടെ ഒരു നിശ്ചിത ഇടവേളയിൽ മാത്രം ഒരു ഘടകം കാണിക്കുന്നതിന്, നിങ്ങൾക്ക് ഒരു .d-*-noneക്ലാസുമായി ഒരു .d-*-*ക്ലാസ് സംയോജിപ്പിക്കാൻ കഴിയും, ഉദാഹരണത്തിന് .d-none .d-md-block .d-xl-noneഇടത്തരം, വലിയ ഉപകരണങ്ങൾ ഒഴികെയുള്ള എല്ലാ സ്‌ക്രീൻ വലുപ്പങ്ങൾക്കുമുള്ള ഘടകം മറയ്‌ക്കും.
| സ്ക്രീനിന്റെ വലിപ്പം | ക്ലാസ് |
|---|---|
| എല്ലാത്തിലും മറഞ്ഞിരിക്കുന്നു | .d-none |
| xs-ൽ മാത്രം മറച്ചിരിക്കുന്നു | .d-none .d-sm-block |
| sm-ൽ മാത്രം മറച്ചിരിക്കുന്നു | .d-sm-none .d-md-block |
| എംഡിയിൽ മാത്രം മറച്ചിരിക്കുന്നു | .d-md-none .d-lg-block |
| lg-യിൽ മാത്രം മറച്ചിരിക്കുന്നു | .d-lg-none .d-xl-block |
| xl-ൽ മാത്രം മറച്ചിരിക്കുന്നു | .d-xl-none |
| എല്ലാവരിലും ദൃശ്യമാണ് | .d-block |
| xs-ൽ മാത്രം ദൃശ്യം | .d-block .d-sm-none |
| sm-ൽ മാത്രം ദൃശ്യമാണ് | .d-none .d-sm-block .d-md-none |
| എംഡിയിൽ മാത്രം ദൃശ്യമാണ് | .d-none .d-md-block .d-lg-none |
| lg-ൽ മാത്രം ദൃശ്യമാണ് | .d-none .d-lg-block .d-xl-none |
| xl-ൽ മാത്രം ദൃശ്യമാണ് | .d-none .d-xl-block |
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>പ്രിന്റിൽ പ്രദർശിപ്പിക്കുക
displayഞങ്ങളുടെ പ്രിന്റ് ഡിസ്പ്ലേ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് പ്രിന്റ് ചെയ്യുമ്പോൾ ഘടകങ്ങളുടെ മൂല്യം മാറ്റുക . displayഞങ്ങളുടെ പ്രതികരിക്കുന്ന .d-*യൂട്ടിലിറ്റികളുടെ അതേ മൂല്യങ്ങൾക്കുള്ള പിന്തുണ ഉൾപ്പെടുന്നു .
.d-print-none.d-print-inline.d-print-inline-block.d-print-block.d-print-table.d-print-table-row.d-print-table-cell.d-print-flex.d-print-inline-flex
പ്രിന്റ്, ഡിസ്പ്ലേ ക്ലാസുകൾ സംയോജിപ്പിക്കാം.
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>