ડિસ્પ્લે પ્રોપર્ટી
અમારી ડિસ્પ્લે યુટિલિટીઝ સાથે ઘટકોના ડિસ્પ્લે મૂલ્ય અને વધુને ઝડપથી અને પ્રતિભાવપૂર્વક ટૉગલ કરો. કેટલાક વધુ સામાન્ય મૂલ્યો માટે સપોર્ટ, તેમજ પ્રિન્ટિંગ વખતે ડિસ્પ્લેને નિયંત્રિત કરવા માટેના કેટલાક વધારાનો સમાવેશ થાય છે.
અમારા રિસ્પોન્સિવ ડિસ્પ્લે યુટિલિટી ક્લાસ સાથે 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
મીડિયા ક્વેરીઝ આપેલ બ્રેકપોઇન્ટ અથવા તેનાથી મોટી સ્ક્રીનની પહોળાઈને અસર કરે છે . ઉદાહરણ તરીકે, બંને અને સ્ક્રીન પર .d-lg-none
સેટ કરે છે.display: none;
lg
xl
ઝડપી મોબાઇલ-મૈત્રીપૂર્ણ વિકાસ માટે, ઉપકરણ દ્વારા ઘટકોને બતાવવા અને છુપાવવા માટે પ્રતિભાવશીલ પ્રદર્શન વર્ગોનો ઉપયોગ કરો. સમાન સાઇટના સંપૂર્ણપણે અલગ વર્ઝન બનાવવાનું ટાળો, તેના બદલે દરેક સ્ક્રીનના કદ માટે ઘટકને પ્રતિભાવપૂર્વક છુપાવો.
ઘટકોને છુપાવવા માટે, કોઈપણ પ્રતિભાવશીલ સ્ક્રીન વિવિધતા માટે ફક્ત .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 |
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
પ્રિન્ટ અને ડિસ્પ્લે વર્ગોને જોડી શકાય છે.