شناور

بررسی اجمالی

این کلاس‌های کاربردی یک عنصر را به چپ یا راست شناور می‌کنند یا شناور را بر اساس اندازه نمای فعلی با استفاده از ویژگی CSSfloat غیرفعال می‌کنند. !importantبرای جلوگیری از مسائل اختصاصی گنجانده شده است. اینها از نقطه های شکست یکسانی مانند سیستم شبکه ما استفاده می کنند. لطفاً توجه داشته باشید که ابزارهای شناور هیچ تأثیری بر موارد فلکس ندارند.

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

پاسخگو

تغییرات پاسخگو نیز برای هر floatمقدار وجود دارد.

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

در اینجا تمام کلاس های پشتیبانی آمده است:

• .float-start
• .float-end
• .float-none
• .float-sm-start
• .float-sm-end
• .float-sm-none
• .float-md-start
• .float-md-end
• .float-md-none
• .float-lg-start
• .float-lg-end
• .float-lg-none
• .float-xl-start
• .float-xl-end
• .float-xl-none
• .float-xxl-start
• .float-xxl-end
• .float-xxl-none

ساس

Utilities API

ابزارهای شناور در API ابزارهای ما در اعلان شده اند scss/_utilities.scss. با نحوه استفاده از Utilities API آشنا شوید.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),