സ്പെയ്സിംഗ്
ബൂട്ട്സ്ട്രാപ്പിൽ ഒരു ഘടകത്തിന്റെ രൂപം പരിഷ്ക്കരിക്കുന്നതിന് ഷോർട്ട്ഹാൻഡ് റെസ്പോൺസീവ് മാർജിൻ, പാഡിംഗ്, ഗ്യാപ്പ് യൂട്ടിലിറ്റി ക്ലാസുകൾ എന്നിവ ഉൾപ്പെടുന്നു.
മാർജിനും പാഡിംഗും
ഷോർട്ട്ഹാൻഡ് ക്ലാസുകളുള്ള ഒരു ഘടകത്തിലേക്കോ അതിന്റെ വശങ്ങളുടെ ഒരു ഉപവിഭാഗത്തിലേക്കോ പ്രതികരണ സൗഹൃദമോ margin
മൂല്യങ്ങളോ നൽകുക. padding
വ്യക്തിഗത പ്രോപ്പർട്ടികൾ, എല്ലാ പ്രോപ്പർട്ടികൾ, ലംബവും തിരശ്ചീനവുമായ പ്രോപ്പർട്ടികൾ എന്നിവയ്ക്കുള്ള പിന്തുണ ഉൾപ്പെടുന്നു. .25rem
മുതൽ വരെയുള്ള ഡിഫോൾട്ട് സാസ് മാപ്പിൽ നിന്നാണ് ക്ലാസുകൾ നിർമ്മിച്ചിരിക്കുന്നത് 3rem
.
CSS ഗ്രിഡ് ലേഔട്ട് മൊഡ്യൂൾ ഉപയോഗിക്കുന്നുണ്ടോ? വിടവ് യൂട്ടിലിറ്റി ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക .
നൊട്ടേഷൻ
xs
മുതൽ വരെയുള്ള എല്ലാ ബ്രേക്ക്പോയിന്റുകൾക്കും ബാധകമായ സ്പെയ്സിംഗ് യൂട്ടിലിറ്റികൾക്ക് xxl
അവയിൽ ബ്രേക്ക്പോയിന്റ് ചുരുക്കമില്ല. കാരണം, ആ ക്ലാസുകൾ മുകളിൽ നിന്നും min-width: 0
മുകളിലേക്കും പ്രയോഗിക്കപ്പെടുന്നു, അതിനാൽ ഒരു മീഡിയ അന്വേഷണത്തിന് ബന്ധമില്ല. എന്നിരുന്നാലും, ശേഷിക്കുന്ന ബ്രേക്ക്പോയിന്റുകളിൽ ഒരു ബ്രേക്ക്പോയിന്റ് ചുരുക്കെഴുത്ത് ഉൾപ്പെടുന്നു.
, , , , {property}{sides}-{size}
എന്നിവയ്ക്കായുള്ള ഫോർമാറ്റ് ഉപയോഗിച്ചാണ് ക്ലാസുകൾക്ക് പേര് നൽകിയിരിക്കുന്നത് .xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
സ്വത്ത് ഇതിൽ ഒന്നാണ്:
m
- സജ്ജമാക്കിയ ക്ലാസുകൾക്ക്margin
p
- സജ്ജമാക്കിയ ക്ലാസുകൾക്ക്padding
വശങ്ങൾ എവിടെയാണ് :
t
- സജ്ജീകരിക്കുന്ന ക്ലാസുകൾക്ക്margin-top
അല്ലെങ്കിൽpadding-top
b
- സജ്ജീകരിക്കുന്ന ക്ലാസുകൾക്ക്margin-bottom
അല്ലെങ്കിൽpadding-bottom
s
- (ആരംഭിക്കുക) സജ്ജീകരിക്കുന്നmargin-left
അല്ലെങ്കിൽpadding-left
LTR-ൽmargin-right
അല്ലെങ്കിൽpadding-right
RTL- ൽ ക്ലാസുകൾക്കായിe
- (അവസാനം) സജ്ജീകരിക്കുന്നmargin-right
അല്ലെങ്കിൽpadding-right
LTR-ൽmargin-left
അല്ലെങ്കിൽpadding-left
RTL- ൽ ക്ലാസുകൾക്ക്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 മാപ്പ് വേരിയബിളിലേക്ക് എൻട്രികൾ ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് കൂടുതൽ വലുപ്പങ്ങൾ ചേർക്കാൻ കഴിയും .)
ഉദാഹരണങ്ങൾ
ഈ ക്ലാസുകളുടെ ചില പ്രതിനിധി ഉദാഹരണങ്ങൾ ഇതാ:
.mt-0 {
margin-top: 0 !important;
}
.ms-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
കഴിയില്ല). ഈ നെഗറ്റീവ് മാർജിനുകൾ ഡിഫോൾട്ടായി അപ്രാപ്തമാക്കിയിരിക്കുന്നു , പക്ഷേ സജ്ജീകരിച്ച് Sass-ൽ പ്രവർത്തനക്ഷമമാക്കാം $enable-negative-margins: true
.
വാക്യഘടന ഡിഫോൾട്ട്, പോസിറ്റീവ് മാർജിൻ യൂട്ടിലിറ്റികൾക്ക് ഏതാണ്ട് സമാനമാണ്, എന്നാൽ n
അഭ്യർത്ഥിച്ച വലുപ്പത്തിന് മുമ്പുള്ള കൂട്ടിച്ചേർക്കലിനൊപ്പം. ഇതിന് വിപരീതമായ ഒരു ഉദാഹരണ ക്ലാസ് ഇതാ .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
വിടവ്
ഉപയോഗിക്കുമ്പോൾ display: grid
, നിങ്ങൾക്ക് gap
പാരന്റ് ഗ്രിഡ് കണ്ടെയ്നറിലെ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കാം. display: grid
വ്യക്തിഗത ഗ്രിഡ് ഇനങ്ങളിലേക്ക് (ഒരു കണ്ടെയ്നറിന്റെ കുട്ടികൾ) മാർജിൻ യൂട്ടിലിറ്റികൾ ചേർക്കുന്നതിൽ നിന്ന് ഇത് ലാഭിക്കാം . $spacers
ഗ്യാപ്പ് യൂട്ടിലിറ്റികൾ ഡിഫോൾട്ടായി പ്രതികരിക്കും, അവ സാസ് മാപ്പിനെ അടിസ്ഥാനമാക്കി ഞങ്ങളുടെ യൂട്ടിലിറ്റിസ് API വഴി ജനറേറ്റുചെയ്യുന്നു .
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
പിന്തുണയിൽ ബൂട്ട്സ്ട്രാപ്പിന്റെ എല്ലാ ഗ്രിഡ് ബ്രേക്ക്പോയിന്റുകൾക്കുമുള്ള റെസ്പോൺസീവ് ഓപ്ഷനുകളും $spacers
മാപ്പിൽ നിന്നുള്ള ആറ് വലുപ്പങ്ങളും ഉൾപ്പെടുന്നു ( 0
- 5
). യൂട്ടിലിറ്റി ക്ലാസ് ഒന്നുമില്ല .gap-auto
, കാരണം ഇത് ഫലത്തിൽ സമാനമാണ് .gap-0
.
സാസ്
മാപ്പുകൾ
സ്പെയ്സിംഗ് യൂട്ടിലിറ്റികൾ സാസ് മാപ്പ് വഴി പ്രഖ്യാപിക്കുകയും തുടർന്ന് ഞങ്ങളുടെ യൂട്ടിലിറ്റിസ് API ഉപയോഗിച്ച് ജനറേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
യൂട്ടിലിറ്റീസ് API
സ്പെയ്സിംഗ് യൂട്ടിലിറ്റികൾ ഞങ്ങളുടെ യൂട്ടിലിറ്റി API-ൽ പ്രഖ്യാപിച്ചിരിക്കുന്നു scss/_utilities.scss
. യൂട്ടിലിറ്റീസ് API എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),