സ്പെയ്സിംഗ്

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

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

ഷോർട്ട്‌ഹാൻഡ് ക്ലാസുകളുള്ള ഒരു ഘടകത്തിലേക്കോ അതിന്റെ വശങ്ങളുടെ ഒരു ഉപവിഭാഗത്തിലേക്കോ പ്രതികരണ സൗഹൃദമോ 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>

നെഗറ്റീവ് മാർജിൻ

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>