in English

Float

Bizning javob beruvchi float yordamchi dasturlarimizdan foydalanib, istalgan elementda, istalgan uzilish nuqtasi bo'ylab floatlarni almashtiring.

Ushbu sahifada

Umumiy koʻrinish

Ushbu yordamchi dastur sinflari elementni chapga yoki o'ngga surib qo'yadi yoki CSS floatxususiyatidan foydalangan holda joriy ko'rish oynasi o'lchamiga asoslanib, suzishni o'chiradi . !importanto'ziga xoslik bilan bog'liq muammolarni oldini olish uchun kiritilgan. Ular bizning panjara tizimimiz bilan bir xil ko'rish oynasining to'xtash nuqtalaridan foydalanadi. Shuni yodda tutingki, float yordam dasturlari moslashuvchan elementlarga ta'sir qilmaydi.

Barcha ko'rish oynasi o'lchamlarida float start

Ko'rish oynasining barcha o'lchamlarida suzuvchi uchi

Ko'rish oynasining barcha o'lchamlarida suzmang

html

<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>

Javobgar

floatHar bir qiymat uchun javob beruvchi o'zgarishlar ham mavjud .

SM (kichik) yoki kengroq o'lchamdagi ko'rish oynalarida float start

MD (o'rta) yoki undan kengroq o'lchamdagi ko'rish oynalarida float start

LG (katta) yoki kengroq o'lchamdagi ko'rish oynalarida suzuvchi start

XL (o'ta katta) yoki kengroq o'lchamdagi ko'rish oynalarida float start

html

<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>

Bu erda barcha qo'llab-quvvatlash darslari:

.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

Sass

Utilities API

Float yordam dasturlari bizning API-da e'lon qilingan scss/_utilities.scss. API yordam dasturlarini qanday ishlatishni bilib oling.

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