לָצוּף

החלף צפים על כל אלמנט, על פני כל נקודת שבירה, באמצעות כלי העזר הציפה הרספונסיביים שלנו.

בעמוד זה

סקירה כללית

מחלקות שירות אלו מרחפות אלמנט שמאלה או ימינה, או משביתות את הצף, בהתבסס על גודל שדה התצוגה הנוכחי באמצעות מאפיין 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

סאס

API של Utilities

כלי עזר צפים מוצהרים ב-API של השירותים שלנו ב- scss/_utilities.scss. למד כיצד להשתמש בממשק ה-API של השירותים.

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