અંતર

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

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

શોર્ટહેન્ડ વર્ગો સાથે એક ઘટક અથવા તેની બાજુઓના સબસેટને પ્રતિભાવ-મૈત્રીપૂર્ણ 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>

નકારાત્મક માર્જિન

CSS માં, marginગુણધર્મો નકારાત્મક મૂલ્યોનો ઉપયોગ કરી શકે છે ( paddingકરી શકતા નથી). 4.2 મુજબ, અમે ઉપર સૂચિબદ્ધ દરેક બિન-શૂન્ય પૂર્ણાંક કદ માટે નકારાત્મક માર્જિન ઉપયોગિતાઓ ઉમેરી છે (દા.ત., 1, 2, 3, 4, 5). આ ઉપયોગિતાઓ સમગ્ર બ્રેકપોઇન્ટમાં ગ્રીડ કોલમ ગટરને કસ્ટમાઇઝ કરવા માટે આદર્શ છે.

વાક્યરચના લગભગ મૂળભૂત, હકારાત્મક માર્જિન ઉપયોગિતાઓ જેવી જ છે, પરંતુ nવિનંતી કરેલ કદ પહેલાંના ઉમેરા સાથે. અહીં એક ઉદાહરણ વર્ગ છે જે તેનાથી વિરુદ્ધ છે .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

અહીં મધ્યમ ( md) બ્રેકપોઇન્ટ અને ઉપરના ભાગમાં બુટસ્ટ્રેપ ગ્રીડને કસ્ટમાઇઝ કરવાનું ઉદાહરણ છે. અમે .colસાથે પેડિંગ વધાર્યું છે .px-md-5અને પછી .mx-md-n5પેરેન્ટ સાથે તેનો પ્રતિકાર કર્યો છે .row.

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>