فاصله گذاری

ابزارهای فاصله گذاری که برای همه نقاط شکست، از 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
  • e- برای کلاس هایی که مجموعه margin-rightیاpadding-right
  • x- برای کلاس هایی که هر دو *-leftو*-right
  • y- برای کلاس هایی که هر دو *-topو*-bottom
  • خالی - برای کلاس هایی که یک marginیا paddingدر هر 4 طرف عنصر را تنظیم می کنند

جایی که اندازه یکی از موارد زیر است: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11وauto

شکاف

هنگام استفاده از display: grid، می توانید از برنامه های gap کاربردی موجود در ظرف شبکه والد استفاده کنید. این می تواند باعث صرفه جویی در نیاز به افزودن ابزارهای حاشیه به آیتم های شبکه جداگانه شود (فرزندان یک صفحه نمایش: ظرف شبکه). ابزارهای Gap به طور پیش فرض پاسخگو هستند و از طریق API ابزارهای ما بر اساس $spacers نقشه Sass تولید می شوند.

مورد گرید 1
مورد شبکه 2
مورد شبکه 3
<p>When using <code>display: grid</code>, you can make use of <code>gap </code>utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid container). Gap utilities are responsive by default, and are generated via our utilities API, based on the <code>$spacers </code>Sass map.</p>
<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>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی