کلاس های کمک کننده

فاصله

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

کلاس ها با استفاده از فرمت نامگذاری می شوند:{property}-{sides}-{size}

  • m- برای کلاس هایی که مجموعه هستند لبه
  • p- برای کلاس هایی که مجموعه هستندلایه

این جدول حاوی کلاس برای اضافه کردن عناصر بالا، پایین، چپ، راست و حاشیه سمت همه است.

کلاس ها شرح
.mt-{size} To set margin top use .mt-{size} class, where {size} is value between 0-3.
.mb-{size} To set margin bottom use .mb-{size} class, where {size} is value between 0-3.
.ml-{size} To set margin left use .ml-{size} class, where {size} is value between 0-3.
.mr-{size} To set margin right use .mr-{size} class, where {size} is value between 0-3.
.mx-{size} To set both margin left & right use .mx-{size} class, where {size} is value between 0-3.
.my-{size} To set both margin top & bottom use .my-{size} class, where {size} is value between 0-3.
.ma-{size} To set margin 4 sides of the element use .ma-{size} class, where {size} is value between 0-3.

این جدول حاوی کلاس برای اضافه کردن عناصر بالا، پایین، چپ، راست و تمام پارتیشن جانبی است.

کلاس ها شرح
.pt-{size} To set padding top use .pt-{size} class, where {size} is value between 0-3.
.pb-{size} To set padding bottom use .pb-{size} class, where {size} is value between 0-3.
.pl-{size} To set padding left use .pl-{size} class, where {size} is value between 0-3.
.pr-{size} To set padding right use .pr-{size} class, where {size} is value between 0-3.
.px-{size} To set both padding left & right use .px-{size} class, where {size} is value between 0-3.
.py-{size} To set both padding top & bottom use .py-{size} class, where {size} is value between 0-3.
.pa-{size} To set padding 4 sides of the element use .pa-{size} class, where {size} is value between 0-3.

اندازهکجاست:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
  • 2 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
  • 3 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

حامیان محتوا

نمایش دادن

کلاس های کمک کننده محتوا نمایش، موقعیت، z-شاخص، لبه ها، تراز عمودی، مکان نما، سرریز را فراهم می کند و گزینه های لیست

یکی از این کلاس ها را اضافه کنید تا خواص نمایش های الکترونیک را تغییر دهید.

کلاس ها شرح
.display-inline Forces the element to behave like an inline element.
.display-inline-block Forces the element to behave like an inline-block element.
.display-block Forces the element to behave like an block element.
.display-hidden Forces the element to hide on all viewports.
موقعیت

یکی از این کلاس ها را برای تنظیم خواص موقعیت عنصر اضافه کنید.

کلاس ها شرح
.position-fixed Changes element's position to fixed.
.position-relative Changes element's position to relative.
.position-absolute Changes element's position to absolute.
.position-static Changes element's position to static.
چیدمان عمودی

یکی از این کلاس ها را اضافه کنید تا خواص همسان سازی عمودی عناصر را تغییر دهید.

کلاس ها شرح
.valign-top Changes element's vertical alignment to top.
.valign-middle Changes element's vertical alignment to middle.
.valign-bottom Changes element's vertical alignment to bottom.
.valign-baseline Changes element's vertical alignment to baseline.
.valign-text-top Top of the element is aligned with the top of the parent element's font.
.valign-text-bottom The bottom of the element is aligned with the bottom of the parent element's font.
لبه

یکی از این ها را اضافه کنید تا لبه های سوخته عناصر را حذف کنید، با عناصر مطلق، ثابت و نسبی موقعیت کار می کند.

کلاس ها شرح
.no-edge-top Removes the top edge of the element.
.no-edge-bottom Removes the bottom edge of the element.
.no-edge-left Removes the left edge of the element.
.no-edge-right Removes the right edge of the element.
سرریز

اضافه کردن یکی از این به کلاس برای تغییر سرریز عنصر.

کلاس ها شرح
.overflow-visible Default. The overflow is not clipped. It renders outside the element's box.
.overflow-hidden The overflow is clipped, and the rest of the content will be invisible.
.overflow-auto If overflow is clipped, a scrollbar should be added to see the rest of the content.
.overflow-scroll The overflow is clipped, but a scrollbar is added to see the rest of the content.
لیست

برای تغییر سبک لیست، یکی از اینها را به کلاس اضافه کنید.

کلاس ها شرح
.no-bullets No marker is shown in the list item.
.bullets-inside Indents the marker and the text. The bullets appear inside the content flow
.list-style-circle Set the list item marker to circle.
.list-style-square Set the list item marker to square.

مرز ها

مرز اضافه کنید

یکی از اینها را به کلاس اضافه کنید تا مرز را در سمت مورد نیاز اضافه کنید.

کلاس ها شرح
.border Add solid border of 1px on each side.
.border-top Add solid border top of 1px.
.border-bottom Add solid border bottom of 1px.
.border-left Add solid border left of 1px.
.border-right Add solid border right of 1px.
حذف مرز

برای حذف مرز در سمت مورد نیاز، یکی از اینها را به کلاس اضافه کنید.

کلاس ها شرح
.no-border Remove border from all side.
.no-border-top Remove border from the top side.
.no-border-bottom Remove border from the bottom side.
.no-border-left Remove border from the left side.
.no-border-right Remove border from the right side.
عرض مرز

یکی از اینها را به کلاس اضافه کنید تا عرض عرض را در سمت مورد نظر تغییر دهید.

کلاس ها شرح
.border-2 Chande border width to 2px on each side.
.border-top-2 Chande border width to 2px on top side.
.border-bottom-2 Chande border width to 2px on bottom side.
.border-left-2 Chande border width to 2px on left side.
.border-right-2 Chande border width to 2px on right side.
.border-3 Chande border width to 3px on each side.
.border-top-3 Chande border width to 3px on top side.
.border-bottom-3 Chande border width to 3px on bottom side.
.border-left-3 Chande border width to 3px on left side.
.border-right-3 Chande border width to 3px on right side.
حذف شعاع مرزی

یکی از اینها را به کلاس اضافه کنید تا شعاع مرزی را در قسمت مورد نظر حذف کنید.

کلاس ها شرح
.no-border-top-radius Remove border radius from top side.
.no-border-bottom-radius Remove border radius from bottom side.
.no-border-top-left-radius Remove border radius from top left side.
.no-border-top-right-radius Remove border radius from top right side.
.no-border-bottom-left-radius Remove border radius from bottom left side.
.no-border-bottom-right-radius Remove border radius from bottom right side.

اندازه

عرض و ارتفاع

برای تنظیم عرض محتوا، یکی از اینها را به کلاس اضافه کنید.

کلاس ها شرح
.fit Set content maximum width 100%.
.half-width Set content width 50%.
.full-width Set content width 100%.
.full-height Set content height 100%.
عرض ثابت

برای تنظیم پهنای ثابت محتوای، یکی از اینها را به کلاس اضافه کنید

کلاس ها شرح
.width-{size} Set content fixed width in pixel of selected size where size can be 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750 and 800. i.e .width-50
.width-{size}-per Set content fixed width in percentage of selected size where size can be 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% and 80%. i.e .width-5-per
ارتفاع ثابت

برای تنظیم ارتفاع ثابت محتوای، یکی از اینها را به کلاس اضافه کنید

کلاس ها شرح
.height-{size} Set content fixed height in pixel of selected size where size can be 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750 and 800. i.e .height-50
.height-{size}-per Set content fixed height in percentage of selected size where size can be 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% and 80%. i.e .height-5-per

عکس

برای تغییر اندازه تصویر و سایر ویژگی، یکی از اینها را به کلاس اضافه کنید.

کلاس ها شرح
.bg-cover Scale the background image to be as large as possible so that the background area is completely covered by the background image.
.bg-repeat Do not repeat the background image.
.bg-no-repeat Repeat the background image.