സ്പെയ്സിംഗ്
ബൂട്ട്സ്ട്രാപ്പിൽ ഒരു ഘടകത്തിന്റെ രൂപഭാവം പരിഷ്ക്കരിക്കുന്നതിന് ഷോർട്ട്ഹാൻഡ് റെസ്പോൺസീവ് മാർജിനും പാഡിംഗ് യൂട്ടിലിറ്റി ക്ലാസുകളും ഉൾപ്പെടുന്നു.
ഷോർട്ട്ഹാൻഡ് ക്ലാസുകളുള്ള ഒരു ഘടകത്തിലേക്കോ അതിന്റെ വശങ്ങളുടെ ഒരു ഉപവിഭാഗത്തിലേക്കോ പ്രതികരണ സൗഹൃദമോ margin
മൂല്യങ്ങളോ നൽകുക. padding
വ്യക്തിഗത പ്രോപ്പർട്ടികൾ, എല്ലാ പ്രോപ്പർട്ടികൾ, ലംബവും തിരശ്ചീനവുമായ പ്രോപ്പർട്ടികൾ എന്നിവയ്ക്കുള്ള പിന്തുണ ഉൾപ്പെടുന്നു. .25rem
മുതൽ വരെയുള്ള ഡിഫോൾട്ട് സാസ് മാപ്പിൽ നിന്നാണ് ക്ലാസുകൾ നിർമ്മിച്ചിരിക്കുന്നത് 3rem
.
xs
മുതൽ വരെയുള്ള എല്ലാ ബ്രേക്ക്പോയിന്റുകൾക്കും ബാധകമായ സ്പെയ്സിംഗ് യൂട്ടിലിറ്റികൾക്ക് xl
അവയിൽ ബ്രേക്ക്പോയിന്റ് ചുരുക്കമില്ല. കാരണം, ആ ക്ലാസുകൾ മുകളിൽ നിന്നും min-width: 0
മുകളിലേക്കും പ്രയോഗിക്കപ്പെടുന്നു, അതിനാൽ ഒരു മീഡിയ അന്വേഷണത്തിന് വിധേയമല്ല. എന്നിരുന്നാലും, ശേഷിക്കുന്ന ബ്രേക്ക്പോയിന്റുകളിൽ ഒരു ബ്രേക്ക്പോയിന്റ് ചുരുക്കെഴുത്ത് ഉൾപ്പെടുന്നു.
, , , {property}{sides}-{size}
എന്നിവയ്ക്കായുള്ള ഫോർമാറ്റ് ഉപയോഗിച്ചാണ് ക്ലാസുകൾക്ക് പേര് നൽകിയിരിക്കുന്നത് .xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
സ്വത്ത് ഇതിൽ ഒന്നാണ്:
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
auto
margin
- സ്വയമേവ സജ്ജമാക്കുന്ന ക്ലാസുകൾക്കായി
$spacers
( Sass മാപ്പ് വേരിയബിളിലേക്ക് എൻട്രികൾ ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് കൂടുതൽ വലുപ്പങ്ങൾ ചേർക്കാൻ കഴിയും .)
ഈ ക്ലാസുകളുടെ ചില പ്രതിനിധി ഉദാഹരണങ്ങൾ ഇതാ:
കൂടാതെ, ബൂട്ട്സ്ട്രാപ്പിൽ തിരശ്ചീനമായ മാർജിനുകൾ സജ്ജീകരിച്ചുകൊണ്ട് .mx-auto
ഫിക്സഡ്-വിഡ്ത്ത് ബ്ലോക്ക് ലെവൽ ഉള്ളടക്കം തിരശ്ചീനമായി കേന്ദ്രീകരിക്കുന്നതിനുള്ള ഒരു ക്ലാസും ഉൾപ്പെടുന്നു-അതായത്, ഉള്ള ഉള്ളടക്കവും display: block
ഒരു സെറ്റും .width
auto