فاصله گذاری

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

چگونه کار می کند

با کلاس های مختصر، مقادیر حاشیه یا بالشتک مناسب پاسخگو را به یک عنصر یا زیر مجموعه ای از کناره های آن اختصاص دهید. شامل پشتیبانی از ویژگی های فردی، همه ویژگی ها، و ویژگی های عمودی و افقی است. کلاس ها از یک نقشه پیش فرض Sass ساخته می شوند که از . 25rem تا 3rem است.

نشانه گذاری

ابزارهای فاصله گذاری که برای همه نقاط شکست، از xs تا xl اعمال می شوند، هیچ علامت اختصاری نقطه شکست در آنها وجود ندارد. این به این دلیل است که آن کلاس ها از عرض min: 0 و بالاتر اعمال می شوند و بنابراین توسط یک درخواست رسانه محدود نمی شوند. با این حال، نقاط شکست باقیمانده شامل یک مخفف نقطه شکست هستند.

کلاس ها با استفاده از فرمت - برای xs و - برای sm , md , lg و xl نامگذاری شده اند.

جایی که ملک یکی از موارد زیر است:

• m - برای کلاس هایی که حاشیه تعیین می کنند
• p - برای کلاس هایی که padding را تنظیم می کنند

جایی که طرف ها یکی از موارد زیر است:

• t - برای کلاس هایی که margin-top یا padding-top را تنظیم می کنند
• b - برای کلاس هایی که margin-bottom یا padding-bottom را تنظیم می کنند
• l - برای کلاس هایی که margin-left یا padding-left را تنظیم می کنند
• r - برای کلاس هایی که margin-right یا padding-right را تنظیم می کنند
• x - برای کلاس هایی که هم *-left و هم *-right را تنظیم می کنند
• y - برای کلاس هایی که هم *-top و هم *-bottom را تنظیم می کنند
• خالی - برای کلاس هایی که یک حاشیه یا padding در هر 4 طرف عنصر تعیین می کنند

جایی که اندازه یکی از موارد زیر است:

• 0 - برای کلاس هایی که با قرار دادن آن بر روی 0 حاشیه یا padding را حذف می کنند
• 1 - (به طور پیش فرض) برای کلاس هایی که حاشیه یا padding را روی $spacer * . 25 تنظیم می کنند
• 2 - (به طور پیش فرض) برای کلاس هایی که حاشیه یا padding را روی $spacer * . 5 تنظیم می کنند
• 3 - (به طور پیش فرض) برای کلاس هایی که حاشیه یا padding را روی $spacer تنظیم می کنند
• 4 - (به طور پیش فرض) برای کلاس هایی که حاشیه یا padding را روی $spacer * 1. 5 تنظیم می کنند
• 5 - (به طور پیش فرض) برای کلاس هایی که حاشیه یا padding را روی $spacer * 3 تنظیم می کنند
• auto - برای کلاس هایی که حاشیه را روی خودکار تنظیم می کنند

(شما می توانید اندازه های بیشتری را با افزودن ورودی به متغیر $spaces Sass map اضافه کنید.)

مثال ها

در اینجا چند نمونه نماینده از این کلاس ها آورده شده است:

. mt-0  حاشیه بالا: 0 !مهم; > . ml-1  حاشیه چپ: ($spacer * . 25) !مهم; > . px-2  padding-left: ($spacer * .5) !مهم; padding-right: ($spacer * .5) !مهم; > . p-3  لایه گذاری: $spacer !مهم; >

مرکز افقی

علاوه بر این، Bootstrap همچنین شامل یک کلاس . mx-auto برای متمرکز کردن افقی محتوای سطح بلوک با عرض ثابت - یعنی محتوایی است که دارای نمایشگر است: بلوک و مجموعه عرض - با تنظیم حاشیه های افقی روی خودکار.

عنصر مرکزی

 کلاس="mx-auto" سبک="width: 200px;">عنصر مرکزی