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

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

ഞങ്ങളുടെ റെസ്‌പോൺസീവ് ഡിസ്‌പ്ലേ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് 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
    ),