અંતર

બુટસ્ટ્રેપમાં તત્વના દેખાવમાં ફેરફાર કરવા માટે શોર્ટહેન્ડ રિસ્પોન્સિવ માર્જિન અને પેડિંગ યુટિલિટી ક્લાસની વિશાળ શ્રેણીનો સમાવેશ થાય છે.

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

શોર્ટહેન્ડ વર્ગો સાથે એક ઘટક અથવા તેની બાજુઓના સબસેટને પ્રતિભાવ-મૈત્રીપૂર્ણ marginઅથવા મૂલ્યો સોંપો. paddingવ્યક્તિગત ગુણધર્મો, તમામ ગુણધર્મો અને વર્ટિકલ અને હોરીઝોન્ટલ પ્રોપર્ટીઝ માટે સપોર્ટનો સમાવેશ થાય છે. થી લઈને ડિફોલ્ટ સાસ નકશામાંથી વર્ગો બનાવવામાં આવે .25remછે 3rem.

નોટેશન

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

વર્ગોને , , , અને {property}{sides}-{size}માટે ફોર્મેટનો ઉપયોગ કરીને નામ આપવામાં આવ્યું છે .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

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

• m- સેટ કરેલા વર્ગો માટેmargin
• p- સેટ કરેલા વર્ગો માટેpadding

જ્યાં બાજુઓમાંથી એક છે:

• t- સેટ margin-topકે વર્ગો માટેpadding-top
• b- સેટ margin-bottomકે વર્ગો માટેpadding-bottom
• l- સેટ margin-leftકે વર્ગો માટેpadding-left
• r- સેટ margin-rightકે વર્ગો માટેpadding-right
• x- વર્ગો માટે કે જે બંને *-leftઅને સેટ કરે છે*-right
• y- વર્ગો માટે કે જે બંને *-topઅને સેટ કરે છે*-bottom
• ખાલી - વર્ગો માટે કે જે તત્વની બધી 4 બાજુઓ પર marginઅથવા સેટ કરે છેpadding

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

• 0- વર્ગો માટે કે જે તેને નાબૂદ કરે છે marginઅથવા paddingતેને સેટ કરીને0
• 1- (મૂળભૂત રીતે) વર્ગો માટે કે જેઓ marginઅથવા પર સેટ કરે paddingછે$spacer * .25
• 2- (મૂળભૂત રીતે) વર્ગો માટે કે જેઓ marginઅથવા પર સેટ કરે paddingછે$spacer * .5
• 3- (મૂળભૂત રીતે) વર્ગો માટે કે જેઓ marginઅથવા પર સેટ કરે paddingછે$spacer
• 4- (મૂળભૂત રીતે) વર્ગો માટે કે જેઓ marginઅથવા પર સેટ કરે paddingછે$spacer * 1.5
• 5- (મૂળભૂત રીતે) વર્ગો માટે કે જેઓ marginઅથવા પર સેટ કરે paddingછે$spacer * 3
• automargin- ઓટો પર સેટ કરતા વર્ગો માટે

$spacers(તમે સાસ મેપ વેરીએબલમાં એન્ટ્રીઓ ઉમેરીને વધુ કદ ઉમેરી શકો છો .)

ઉદાહરણો

અહીં આ વર્ગોના કેટલાક પ્રતિનિધિ ઉદાહરણો છે:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

આડું કેન્દ્રીકરણ

વધુમાં, બુટસ્ટ્રેપમાં .mx-autoનિશ્ચિત-પહોળાઈના બ્લોક સ્તરની સામગ્રીને આડા કેન્દ્રમાં રાખવા માટેનો વર્ગ પણ શામેલ છે—એટલે કે, જે સામગ્રી ધરાવે છે display: blockઅને widthસમૂહ-આડા હાંસિયાને સેટ કરીને auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>