واټن

بوټسټریپ کې د عنصر ظاهري بدلون لپاره د لنډ لاسي ځواب ویونکي مارجین ، پیډینګ ، او د تشې یوټیلټي ټولګیو پراخه لړۍ شامله ده.

په دې پاڼه کې

مارجن او پیډینګ

ځواب ورکوونکي دوستانه marginیا paddingارزښتونه یو عنصر یا د هغې د اړخونو فرعي سیټ ته د لنډ لاسي ټولګیو سره وټاکئ. د انفرادي ملکیتونو، ټول ملکیتونو، او عمودی او افقی ملکیتونو لپاره ملاتړ شامل دی. ټولګي د ډیفالټ Sass نقشې څخه .25remتر 3rem.

د CSS گرډ ترتیب ماډل کارول؟ پرځای یې د ګپ افادیت کارولو ته پام وکړئ .

یادښت

د فاصلې اسانتیاوې چې په ټولو بریک پوائنټونو کې پلي کیږي ، له څخه xsتر xxl، په دوی کې د وقفې نقطې لنډیز نشته. دا ځکه چې دا ټولګي له min-width: 0پورته او پورته څخه پلي کیږي، او پدې توګه د رسنیو پوښتنې پورې تړلي ندي. په هرصورت، پاتې وقفې د وقفې نقطې لنډیز شامل دي.

ټولګیو ته د , , , , and {property}{sides}-{size}for format په کارولو سره نوم ورکول کیږي .xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

چیرې چې ملکیت یو له دې څخه دی:

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
خالي - د ټولګیو لپاره چې د marginعنصر paddingپه ټولو 4 اړخونو کې تنظیموي

چیرې چې اندازه یو له دې څخه دی:

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(تاسو کولی شئ د ساس نقشې متغیر ته د ننوتلو په اضافه کولو سره نور اندازې اضافه کړئ .)

مثالونه

دلته د دې ټولګیو ځینې نمایشي مثالونه دي:

.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د ګیپ یوټیلیټیز د ډیفالټ لخوا ځواب ویونکي دي، او د Sass نقشې پراساس زموږ د اسانتیاو API له لارې رامینځته شوي .

گرډ توکي 1

گرډ توکي 2

گرډ توکي 3

html

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

Utilities 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),