ابزار فاصله گذاری

کامپوننت ها

طیف گسترده ای از کلاس های کاربردی حاشیه خارجی و داخلی واکنشگرا برای تغییر ظاهر یک عنصر. بیشتر برای کارت ها، دکمه ها یا هر عنصر دیگری استفاده می شود.

این به شما مقدار فضای استفاده شده در {size} را راهنمایی می کند

مرجع	مقدار	جزئیات
`{size}`	0 1 2 3 4 5 gs	`0rem` به عنوان `0px` `0.375rem` به عنوان `6px` `0.75rem` به عنوان `12px` `1.0rem` به عنوان `16px` `1.5rem` به عنوان `24px` `2.75rem` به عنوان `44px` `28px` به عنوان اندازه `gutter`
توجه: اندازه فونت پایه 16px و 1rem برابر با 16px است

این کلاس های کاربردی امکان تنظیم حاشیه بیرونی را برای یک عنصر ارائه می کنند.

me-gs

me-5

me-4

me-3

me-2

me-1

مرجع کلاس	اندازه	یادداشت
`.m-{size}`	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| gs \| auto	حاشیه بیرونی را در اطراف عنصر اعمال می کند
`.ms-{size}` `.me-{size}` `.mt-{size}` `.mb-{size}`	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| gs \| auto	حاشیه بیرونی را در سمت خاصی از عنصر اعمال می کند
`.m-{screen}-{size}`	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| gs \| auto	از `{screen}` به عنوان `sm \| md \| lg \| xl` استفاده کنید
`.ms-{screen}-{size}` `.me-{screen}-{size}` `.mt-{screen}-{size}` `.mb-{screen}-{size}`	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| gs \| auto	مانند بالا
`{screen}` مربوط به نقطه شکست است و از `{screen}` که استفاده می کنید اعمال می شود. به عنوان مثال، `.m-sm-2` حاشیه بیرونی را در صفحه `sm` تنظیم می کند و به صفحه های بالا ادامه می دهد.

مثال استفاده

<div class="m-2"> ... </div>
<div class="m-lg-2"> ... </div>
<div class="ms-lg-3 ms-sm-2"> ... </div>

این کلاس های کاربردی امکان تنظیم حاشیه داخلی را برای یک عنصر ارائه می کنند.

p-1

p-2

p-3

p-4

p-5

p-gs

مرجع کلاس	اندازه	یادداشت
`.p-{size}`	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| gs \| auto	حاشیه داخلی را در اطراف عنصر اعمال می کند
`.ps-{size}` `.pe-{size}` `.pt-{size}` `.pb-{size}`	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| gs \| auto	حاشیه داخلی را در سمت خاصی از عنصر اعمال می کند
`.p-{screen}-{size}`	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| gs \| auto	از `{screen}` به عنوان `sm، md، lg، xl` استفاده کنید
`.ps-{screen}-{size}` `.pe-{screen}-{size}` `.pt-{screen}-{size}` `.pb-{screen}-{size}`	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| gs \| auto	مانند بالا
`{screen}` مربوط به نقطه شکست است و از `{screen}` که استفاده می کنید اعمال می شود. به عنوان مثال، `.m-sm-2` حاشیه داخلی را در صفحه `sm` تنظیم می کند و به صفحه های بالا ادامه می دهد.

مثال استفاده

<div class="p-2"> ... </div>
<div class="p-lg-2"> ... </div>
<div class="p-lg-3 p-sm-2"> ... </div>

کلاس های شکاف اجازه می دهند تا شکاف خاصی را بین بخش یا بلاک تنظیم کنید.

مرجع کلاس	مقدار
`.gap`	`28px` به عنوان اندازه `gutter`
`.gap-sm`	`0.75rem` به عنوان `12px`
`.gap-md`	`1.25rem` به عنوان `20px`
`.gap-lg`	`2rem` به عنوان `32px`
`.gap-xl`	`2.5rem` به عنوان `40px`
`.gap-{num}px`	از `[10، 20، 30، 40، 50، 60، 70، 80، 90، 100]` به عنوان مقدار `{num}` استفاده می شود	ثابت در پیکسل
`.gap-{size}`	`[0، 1، 2، 3، 4، 5]` به عنوان مقدار `{size}`	`{size}` مربوط به مرجع اندازه است.

مثال استفاده

<div class="gap"></div>
<div class="gap gap-sm"></div>
<div class="gap gap-20px"></div>