സ്പെയ്സിംഗ്

മാർജിനും പാഡിംഗും

ഷോർട്ട്‌ഹാൻഡ് ക്ലാസുകളുള്ള ഒരു ഘടകത്തിലേക്കോ അതിന്റെ വശങ്ങളുടെ ഒരു ഉപവിഭാഗത്തിലേക്കോ പ്രതികരണ സൗഹൃദമോ marginമൂല്യങ്ങളോ നൽകുക. paddingവ്യക്തിഗത പ്രോപ്പർട്ടികൾ, എല്ലാ പ്രോപ്പർട്ടികൾ, ലംബവും തിരശ്ചീനവുമായ പ്രോപ്പർട്ടികൾ എന്നിവയ്ക്കുള്ള പിന്തുണ ഉൾപ്പെടുന്നു. .25remമുതൽ വരെയുള്ള ഡിഫോൾട്ട് സാസ് മാപ്പിൽ നിന്നാണ് ക്ലാസുകൾ നിർമ്മിച്ചിരിക്കുന്നത് 3rem.

CSS ഗ്രിഡ് ലേഔട്ട് മൊഡ്യൂൾ ഉപയോഗിക്കുന്നുണ്ടോ? വിടവ് യൂട്ടിലിറ്റി ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക .

നൊട്ടേഷൻ

xsമുതൽ വരെയുള്ള എല്ലാ ബ്രേക്ക്‌പോയിന്റുകൾക്കും ബാധകമായ സ്‌പെയ്‌സിംഗ് യൂട്ടിലിറ്റികൾക്ക് xxlഅവയിൽ ബ്രേക്ക്‌പോയിന്റ് ചുരുക്കമില്ല. കാരണം, ആ ക്ലാസുകൾ മുകളിൽ നിന്നും min-width: 0മുകളിലേക്കും പ്രയോഗിക്കപ്പെടുന്നു, അതിനാൽ ഒരു മീഡിയ അന്വേഷണത്തിന് വിധേയമല്ല. എന്നിരുന്നാലും, ശേഷിക്കുന്ന ബ്രേക്ക്‌പോയിന്റുകളിൽ ഒരു ബ്രേക്ക്‌പോയിന്റ് ചുരുക്കെഴുത്ത് ഉൾപ്പെടുന്നു.

, , , , {property}{sides}-{size}എന്നിവയ്‌ക്കായുള്ള ഫോർമാറ്റ് ഉപയോഗിച്ചാണ് ക്ലാസുകൾക്ക് പേര് നൽകിയിരിക്കുന്നത് .xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

സ്വത്ത് ഇതിൽ ഒന്നാണ്:

• m- സജ്ജമാക്കിയ ക്ലാസുകൾക്ക്margin
• p- സജ്ജമാക്കിയ ക്ലാസുകൾക്ക്padding

വശങ്ങൾ എവിടെയാണ് :

• t- സജ്ജീകരിക്കുന്ന ക്ലാസുകൾക്ക് margin-topഅല്ലെങ്കിൽpadding-top
• b- സജ്ജീകരിക്കുന്ന ക്ലാസുകൾക്ക് margin-bottomഅല്ലെങ്കിൽpadding-bottom
• s- (ആരംഭിക്കുക) സജ്ജീകരിക്കുന്ന margin-leftഅല്ലെങ്കിൽ padding-leftLTR-ൽ margin-rightഅല്ലെങ്കിൽ padding-rightRTL- ൽ ക്ലാസുകൾക്കായി
• e- (അവസാനം) സജ്ജീകരിക്കുന്ന margin-rightഅല്ലെങ്കിൽ padding-rightLTR-ൽ margin-leftഅല്ലെങ്കിൽ padding-leftRTL- ൽ ക്ലാസുകൾക്ക്
• 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;
}

.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ഉള്ളതും ഒരു സെറ്റും ഉള്ള ഉള്ളടക്കം .widthauto

<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
    ),