പ്രോപ്പർട്ടി പ്രദർശിപ്പിക്കുക

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഞങ്ങളുടെ പ്രതികരിക്കുന്ന ഡിസ്പ്ലേ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് displayപ്രോപ്പർട്ടി മൂല്യം മാറ്റുക . എന്നതിന് സാധ്യമായ എല്ലാ മൂല്യങ്ങളുടെയും ഒരു ഉപവിഭാഗത്തെ മാത്രമേ ഞങ്ങൾ മനഃപൂർവ്വം പിന്തുണയ്ക്കൂ display. നിങ്ങൾക്ക് ആവശ്യമുള്ളത്ര വ്യത്യസ്ത ഇഫക്റ്റുകൾക്കായി ക്ലാസുകൾ സംയോജിപ്പിക്കാൻ കഴിയും.

നൊട്ടേഷൻ

മുതൽ വരെയുള്ള എല്ലാ ബ്രേക്ക്‌പോയിന്റുകൾക്കും ബാധകമായ ഡിസ്പ്ലേ യൂട്ടിലിറ്റി ക്ലാസുകളിൽ അവയിൽ ബ്രേക്ക്‌പോയിന്റ് ചുരുക്കമില്ല. കാരണം, ആ ക്ലാസുകൾ മുകളിൽ നിന്നും മുകളിലേക്കും പ്രയോഗിക്കപ്പെടുന്നു, അതിനാൽ ഒരു മീഡിയ അന്വേഷണത്തിന് വിധേയമല്ല. എന്നിരുന്നാലും, ശേഷിക്കുന്ന ബ്രേക്ക്‌പോയിന്റുകളിൽ ഒരു ബ്രേക്ക്‌പോയിന്റ് ചുരുക്കെഴുത്ത് ഉൾപ്പെടുന്നു.xsxxlmin-width: 0;

അതുപോലെ, ക്ലാസുകൾക്ക് ഫോർമാറ്റ് ഉപയോഗിച്ചാണ് പേര് നൽകിയിരിക്കുന്നത്:

• .d-{value}വേണ്ടിxs
• .d-{breakpoint}-{value}വേണ്ടി sm, md, lg, xl, ഒപ്പം xxl.

മൂല്യം ഇതിൽ ഒന്നാണ്:

• none
• inline
• inline-block
• block
• grid
• table
• table-cell
• table-row
• flex
• inline-flex

$displaysവേരിയബിൾ മാറ്റി SCSS വീണ്ടും കംപൈൽ ചെയ്യുന്നതിലൂടെ ഡിസ്പ്ലേ മൂല്യങ്ങൾ മാറ്റാവുന്നതാണ്.

നൽകിയിരിക്കുന്ന ബ്രേക്ക്‌പോയിന്റോ അതിൽ കൂടുതലോ ഉള്ള സ്‌ക്രീൻ വീതിയെ മീഡിയ അന്വേഷണങ്ങൾ ബാധിക്കുന്നു . ഉദാഹരണത്തിന് , , , സ്ക്രീനുകൾ എന്നിവയിൽ .d-lg-noneസജ്ജീകരിക്കുന്നു .display: none;lgxlxxl

ഉദാഹരണങ്ങൾ

<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,xxl}-none

സ്‌ക്രീൻ വലുപ്പങ്ങളുടെ ഒരു നിശ്ചിത ഇടവേളയിൽ മാത്രം ഒരു ഘടകം കാണിക്കുന്നതിന്, നിങ്ങൾക്ക് ഒരു .d-*-noneക്ലാസുമായി ഒരു .d-*-*ക്ലാസ് സംയോജിപ്പിക്കാൻ കഴിയും, ഉദാഹരണത്തിന് .d-none .d-md-block .d-xl-none .d-xxl-noneഇടത്തരം, വലിയ ഉപകരണങ്ങൾ ഒഴികെയുള്ള എല്ലാ സ്‌ക്രീൻ വലുപ്പങ്ങൾക്കുമുള്ള ഘടകം മറയ്‌ക്കും.

<div class="d-lg-none">hide on lg and wider screens</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-grid
• .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>

സാസ്

യൂട്ടിലിറ്റീസ് API

ഡിസ്പ്ലേ യൂട്ടിലിറ്റികൾ ഞങ്ങളുടെ യൂട്ടിലിറ്റി API-ൽ പ്രഖ്യാപിച്ചിരിക്കുന്നു scss/_utilities.scss. യൂട്ടിലിറ്റീസ് API എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),