לָצוּף

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

סקירה כללית

מחלקות שירות אלו מרחפות אלמנט שמאלה או ימינה, או משביתות את הצף, בהתבסס על גודל שדה התצוגה הנוכחי באמצעות מאפיין CSSfloat . !importantנכלל כדי למנוע בעיות ספציפיות. אלה משתמשים באותן נקודות עצירה של נקודת מבט כמו מערכת הרשת שלנו. אנא שים לב שלכלי שירות לצוף אין השפעה על פריטי flex.

שיעורים

החלף צף עם מחלקה:

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

מיקסינס

או לפי Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

תגובה

קיימות גם וריאציות רספונסיביות עבור כל floatערך.

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

להלן כל שיעורי התמיכה;

• .float-left
• .float-right
• .float-none
• .float-sm-left
• .float-sm-right
• .float-sm-none
• .float-md-left
• .float-md-right
• .float-md-none
• .float-lg-left
• .float-lg-right
• .float-lg-none
• .float-xl-left
• .float-xl-right
• .float-xl-none