സ്പെയ്സിംഗ്

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഒരു ഘടകത്തിന്റെ രൂപഭാവം പരിഷ്‌ക്കരിക്കുന്നതിന് ഷോർട്ട്‌ഹാൻഡ് റെസ്‌പോൺസീവ് മാർജിനും പാഡിംഗ് യൂട്ടിലിറ്റി ക്ലാസുകളും ഉൾപ്പെടുന്നു.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഷോർട്ട്‌ഹാൻഡ് ക്ലാസുകളുള്ള ഒരു ഘടകത്തിലേക്കോ അതിന്റെ വശങ്ങളുടെ ഒരു ഉപവിഭാഗത്തിലേക്കോ പ്രതികരണ സൗഹൃദമോ 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( Sass മാപ്പ് വേരിയബിളിലേക്ക് എൻട്രികൾ ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് കൂടുതൽ വലുപ്പങ്ങൾ ചേർക്കാൻ കഴിയും .)

ഉദാഹരണങ്ങൾ

ഈ ക്ലാസുകളുടെ ചില പ്രതിനിധി ഉദാഹരണങ്ങൾ ഇതാ:

.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ഒരു സെറ്റും .widthauto

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