පරතරය

මූලද්‍රව්‍යයක පෙනුම වෙනස් කිරීම සඳහා බූට්ස්ට්‍රැප් හි පුළුල් පරාසයක කෙටිකතා ප්‍රතිචාර ආන්තිකය, පිරවුම් සහ පරතරය උපයෝගිතා පන්ති ඇතුළත් වේ.

මෙම පිටුවේ

ආන්තිකය සහ පිරවුම

කෙටිකතා පන්ති සමඟ මූලද්‍රව්‍යයකට හෝ එහි පැතිවල උප කුලකයකට ප්‍රතිචාරාත්මක-හිතකාමී marginහෝ අගයන් පවරන්න. paddingතනි ගුණාංග, සියලු ගුණාංග සහ සිරස් සහ තිරස් ගුණාංග සඳහා සහාය ඇතුළත් වේ. .25remසිට දක්වා විහිදෙන පෙරනිමි Sass සිතියමකින් පන්ති ගොඩනගා ඇත 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
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;
}

තිරස් කේන්ද්රගත කිරීම

මීට අමතරව, Bootstrap හි තිරස් මායිම් සැකසීමෙන් .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 හරහා ජනනය වේ.

ජාල අයිතමය 1

ජාල අයිතමය 2

ජාල අයිතමය 3

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

සහායට Bootstrap හි සියලුම ජාල බිඳුම් ලක්ෂ්‍ය සඳහා ප්‍රතිචාරාත්මක විකල්ප මෙන්ම $spacersසිතියමෙන් ප්‍රමාණ හයක් ( 0– 5) ඇතුළත් වේ. .gap-autoඑය ඵලදායී ලෙස සමාන වන බැවින් උපයෝගිතා පන්තියක් නොමැත .gap-0.

සාස්

සිතියම්

ස්පේසිං උපයෝගිතා Sass සිතියම හරහා ප්‍රකාශ කර පසුව අපගේ උපයෝගිතා 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
    ),