Source

ડિસ્પ્લે પ્રોપર્ટી

અમારી ડિસ્પ્લે યુટિલિટીઝ સાથે ઘટકોના ડિસ્પ્લે મૂલ્ય અને વધુને ઝડપથી અને પ્રતિભાવપૂર્વક ટૉગલ કરો. કેટલાક વધુ સામાન્ય મૂલ્યો માટે સપોર્ટ, તેમજ પ્રિન્ટિંગ વખતે ડિસ્પ્લેને નિયંત્રિત કરવા માટેના કેટલાક વધારાનો સમાવેશ થાય છે.

તે કેવી રીતે કામ કરે છે

અમારા રિસ્પોન્સિવ ડિસ્પ્લે યુટિલિટી ક્લાસ વડે displayપ્રોપર્ટીની કિંમત બદલો . અમે હેતુપૂર્વક માટે તમામ સંભવિત મૂલ્યોના માત્ર સબસેટને સમર્થન આપીએ છીએ display. તમને જરૂર મુજબ વિવિધ અસરો માટે વર્ગો જોડી શકાય છે.

નોટેશન

ડિસ્પ્લે યુટિલિટી ક્લાસ કે જે તમામ બ્રેકપોઈન્ટ પર લાગુ થાય છે , થી xsલઈને xl, તેમાં કોઈ બ્રેકપોઈન્ટ સંક્ષિપ્ત નથી. આ એટલા માટે છે કારણ કે તે વર્ગો min-width: 0;ઉપરથી અને ઉપરથી લાગુ કરવામાં આવે છે, અને આમ મીડિયા ક્વેરી દ્વારા બંધાયેલા નથી. જો કે, બાકીના બ્રેકપોઇન્ટ્સમાં બ્રેકપોઇન્ટ સંક્ષિપ્તનો સમાવેશ થાય છે.

જેમ કે, વર્ગોને ફોર્મેટનો ઉપયોગ કરીને નામ આપવામાં આવ્યું છે:

  • .d-{value}માટેxs
  • .d-{breakpoint}-{value}માટે sm, md, lg, અને xl.

જ્યાં મૂલ્ય આમાંથી એક છે:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-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
માત્ર md પર છુપાયેલું છે .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
માત્ર md પર જ દૃશ્યક્ષમ .d-none .d-md-block .d-lg-none
માત્ર lg પર જ દૃશ્યક્ષમ .d-none .d-lg-block .d-xl-none
માત્ર xl પર જ દૃશ્યમાન .d-none .d-xl-block
એલજી અને વિશાળ સ્ક્રીન પર છુપાવો
lg કરતાં નાની સ્ક્રીન પર છુપાવો 
<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-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

પ્રિન્ટ અને ડિસ્પ્લે વર્ગોને જોડી શકાય છે.

ફક્ત સ્ક્રીન (ફક્ત પ્રિન્ટ પર છુપાવો)
Print Only (Hide on screen only)
સ્ક્રીન પર મોટા સુધી છુપાવો, પરંતુ હંમેશા પ્રિન્ટ પર બતાવો 
<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>