تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

يطفو

تبديل العوامات على أي عنصر ، عبر أي نقطة توقف ، باستخدام أدوات التعويم سريعة الاستجابة الخاصة بنا.

ملخص

تقوم فئات الأدوات المساعدة هذه بتعويم عنصر إلى اليسار أو اليمين ، أو تعطيل العائمة ، بناءً على حجم منفذ العرض الحالي باستخدام خاصية 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قيمة.

بدء تعويم في منفذ العرض بحجم SM (صغير) أو أوسع

بدء تعويم في منفذ العرض بحجم MD (متوسط) أو أوسع

بدء تعويم في منفذ العرض بحجم LG (كبير) أو أوسع

بدء تعويم في منفذ العرض بحجم XL (كبير جدًا) أو أوسع

<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

ساس

واجهة برمجة تطبيقات المرافق

يتم الإعلان عن الأدوات العائمة في واجهة برمجة التطبيقات الخاصة بالمرافق في scss/_utilities.scss. تعرف على كيفية استخدام واجهة برمجة تطبيقات المرافق.

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