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

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

આ પૃષ્ઠ પર

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

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

નોટેશન

ડિસ્પ્લે યુટિલિટી ક્લાસ કે જે તમામ બ્રેકપોઈન્ટ પર લાગુ થાય છે , થી xsલઈને xxl, તેમાં કોઈ બ્રેકપોઈન્ટ સંક્ષિપ્ત નથી. આ એટલા માટે છે કારણ કે તે વર્ગો min-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

ડિસ્પ્લે મૂલ્યોને SCSS displayમાં વ્યાખ્યાયિત મૂલ્યોને બદલીને અને ફરીથી કમ્પાઇલ કરીને બદલી શકાય છે.$utilities

મીડિયા ક્વેરીઝ આપેલ બ્રેકપોઇન્ટ અથવા તેનાથી મોટી સ્ક્રીનની પહોળાઈને અસર કરે છે . ઉદાહરણ તરીકે, , અને સ્ક્રીન પર .d-lg-noneસેટ કરે છે.display: none;lgxlxxl

ઉદાહરણો

ડી-ઇનલાઇન

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

ડી-બ્લોક ડી-બ્લોક

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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મધ્યમ અને મોટા ઉપકરણો સિવાયના તમામ સ્ક્રીન કદ માટે તત્વ છુપાવશે.

સ્ક્રીનનું કદ	વર્ગ
બધા પર છુપાયેલ	`.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`
ફક્ત xxl પર છુપાયેલ છે	`.d-xxl-none .d-xxl-block`
બધા પર દૃશ્યમાન	`.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 .d-xxl-none`
માત્ર xxl પર જ દૃશ્યમાન	`.d-none .d-xxl-block`

એલજી અને વિશાળ સ્ક્રીન પર છુપાવો

lg કરતાં નાની સ્ક્રીન પર છુપાવો

html

<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

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

ફક્ત સ્ક્રીન (ફક્ત પ્રિન્ટ પર છુપાવો)

ફક્ત છાપો (ફક્ત સ્ક્રીન પર છુપાવો)

સ્ક્રીન પર મોટા સુધી છુપાવો, પરંતુ હંમેશા પ્રિન્ટ પર બતાવો

html

<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
    ),