فاصله

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

در این صفحه

حاشیه و بالشتک

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

با استفاده از ماژول چیدمان شبکه CSS؟استفاده از ابزار GAP را در نظر بگیرید.

نشانه گذاری

ابزارهای Spacing که در مورد همه نقاط شکست اعمال می شود ، از XS تا XXL ، هیچ مخفف نقطه شکست در آنها وجود ندارد. این امر به این دلیل است که این کلاس ها از عرض مین استفاده می شوند: 0 و بالاتر ، و بنابراین به یک پرس و جو رسانه ای محدود نمی شوند. با این حال ، نقاط شکست باقیمانده شامل یک مخفف نقطه شکست است.

کلاس ها با استفاده از قالب - برای XS و - برای SM ، MD ، LG ، XL و XXL نامگذاری شده اند.

که در آن یکی از املاک است:

• M - برای کلاسهایی که حاشیه را تعیین کرده اند
• P - برای کلاسهایی که بالشتک را تنظیم می کنند

که در آن طرف یکی از:

• T-برای کلاس هایی که حاشیه یا بالشتک را تنظیم می کنند
• ب-برای کلاسهایی که حاشیه حاشیه یا پایین بالشتک را تعیین می کنند
• S-(شروع) برای کلاسهایی که حاشیه چپ یا سمت چپ را در LTR ، حاشیه راست یا حق بالا در RTL قرار داده اند
• E-(پایان) برای کلاسهایی که حاشیه راست یا درست و راست را در LTR ، حاشیه چپ یا بالشتک سمت چپ در RTL قرار داده اند
• X-برای کلاسهایی که هر دو *-lft و *-right را تنظیم می کنند
• y-برای کلاسهایی که هر دو *-top و *-bottom را تنظیم می کنند
• خالی - برای کلاسهایی که حاشیه یا بالشتک را در هر 4 طرف عنصر قرار داده اند

اندازه یکی از:

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

(می توانید با اضافه کردن ورودی به متغیر نقشه SASS SASS ، اندازه های بیشتری را اضافه کنید.)

مثال ها

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

. mt-0  حاشیه: 0 ! مهم; > . MS-1  حاشیه چپ: (فاصله * . 25) ! مهم; > . px-2  دست چپ: (فاصله * .5) ! مهم; حق بالشتک: (فاصله * .5) ! مهم; > . p-3  لایه گذاری: فاصله ! مهم; > 

مرکز افقی

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

عنصر محور

قسمت طبقه="MX-AUTO" سبک="عرض: 200px ؛">عنصر محورقسمت> 

حاشیه منفی

در CSS ، خواص حاشیه می تواند از مقادیر منفی استفاده کند (بالشتک نمی تواند). این حاشیه های منفی به طور پیش فرض غیرفعال می شوند ، اما با تنظیم مارپیچ های منفی $ $ فعال می توان در SASS فعال کرد: درست است.

نحو تقریباً برابر با برنامه های پیش فرض و حاشیه مثبت است ، اما با افزودن N قبل از اندازه درخواست شده. در اینجا یک کلاس مثال وجود دارد که برعکس . mt-1 است:

. mt-n1  حاشیه: -0. 25رگ ! مهم; > 

شکاف

هنگام استفاده از Display: Grid ، می توانید از آب و برق GAP در ظرف GRAD GRID استفاده کنید. این می تواند در اضافه کردن برنامه های حاشیه ای به وسایل شبکه فردی (کودکان یک صفحه نمایش: ظرف شبکه) صرفه جویی کند. برنامه های GAP به طور پیش فرض پاسخگو هستند و بر اساس نقشه SASS $ Spacers از طریق API Utilities ما تولید می شوند.

شبکه مورد 1 شبکه 2 شبکه 3

قسمت طبقه="D-Grid Gap-3"> قسمت طبقه="مرز P-2 BG-Light">شبکه مورد 1قسمت> قسمت طبقه="مرز P-2 BG-Light">شبکه 2قسمت> قسمت طبقه="مرز P-2 BG-Light">شبکه 3قسمت> قسمت>

پشتیبانی شامل گزینه های پاسخگو برای همه نقاط ضعف شبکه Bootstrap و همچنین شش اندازه از نقشه $ Spacers (0 - 5) است. هیچ کلاس ابزار . gap-auto وجود ندارد زیرا در واقع مشابه . gap-0 است.

خندیدن

نقشه ها

ابزارهای فاصله از طریق نقشه SASS اعلام شده و سپس با API برنامه های کاربردی ما تولید می شوند.

فاصله: 1رگ; $ فاصله: ( 0: 0, 1: فاصله * . 25, 2: فاصله * .5, 3: فاصله, 4: فاصله * 1.5, 5: فاصله * 3, ); $ فضانوردان منفی: if($ مارپیچ های منفی را فعال کنید, نقشه نگار($ فاصله), خالی); 

API برنامه های کاربردی

ابزارهای Spacing در API برنامه های ما در SCSS/_Utilities. Scss اعلام شده است. بیاموزید که چگونه از API برنامه های کاربردی استفاده کنید.

 "لبه": ( پاسخگو: درست است، واقعی, ویژگی: لبه, طبقه: m, ارزش های: نقشه برداری($فاصله, (خودکار: خودکار)) ), "Margin-X": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه راست حاشیه چپ, طبقه: mx, ارزش های: نقشه برداری($فاصله, (خودکار: خودکار)) ), "margin-y": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه حاشیه پایین, طبقه: my, ارزش های: نقشه برداری($فاصله, (خودکار: خودکار)) ), "حاشیه بالا": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه, طبقه: mt, ارزش های: نقشه برداری($فاصله, (خودکار: خودکار)) ), "حاشیه پایان": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه راست, طبقه: me, ارزش های: نقشه برداری($فاصله, (خودکار: خودکار)) ), "حاشیه پایین": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه پایین, طبقه: mb, ارزش های: نقشه برداری($فاصله, (خودکار: خودکار)) ), "حاشیه شروع": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه چپ, طبقه: ms, ارزش های: نقشه برداری($فاصله, (خودکار: خودکار)) ), // منفی لبه خدمات رفاهی "حاشیه منفی": ( پاسخگو: درست است، واقعی, ویژگی: لبه, طبقه: m, ارزش های: $فایب منفی ), "منفی-حاشیه": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه راست حاشیه چپ, طبقه: mx, ارزش های: $فایب منفی ), "منفی-حاشیه": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه حاشیه پایین, طبقه: my, ارزش های: $فایب منفی ), "حاشیه منفی": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه, طبقه: mt, ارزش های: $فایب منفی ), "حاشیه منفی": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه راست, طبقه: me, ارزش های: $فایب منفی ), "حاشیه منفی": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه پایین, طبقه: mb, ارزش های: $فایب منفی ), "-شروع منفی": ( پاسخگو: درست است، واقعی, ویژگی: حاشیه چپ, طبقه: ms, ارزش های: $فایب منفی ), // لایه گذاری خدمات رفاهی "لایه گذاری": ( پاسخگو: درست است، واقعی, ویژگی: لایه گذاری, طبقه: p, ارزش های: $فاصله ), "padding-x": ( پاسخگو: درست است، واقعی, ویژگی: حق بالشتک دست چپ, طبقه: px, ارزش های: $فاصله ), "padding-y": ( پاسخگو: درست است، واقعی, ویژگی: در بالای بالشتک در کف پایین, طبقه: py, ارزش های: $فاصله ), "بالشتک-بالا": ( پاسخگو: درست است، واقعی, ویژگی: در بالای بالشتک, طبقه: pt, ارزش های: $فاصله ), "padding-end": ( پاسخگو: درست است، واقعی, ویژگی: حق بالشتک, طبقه: pe, ارزش های: $فاصله ), "پایین بالشتک": ( پاسخگو: درست است، واقعی, ویژگی: در کف پایین, طبقه: pb, ارزش های: $فاصله ), "شروع کار": ( پاسخگو: درست است، واقعی, ویژگی: دست چپ, طبقه: ps, ارزش های: $فاصله ), 

• با کمک همکاران ما با تمام عشق در جهان توسط تیم Bootstrap طراحی و ساخته شده است.
• کد دارای مجوز MIT ، Docs CC توسط 3. 0.
• در حال حاضر v5. 0. 2.
• تجزیه و تحلیل توسط Fathom.