ngambang

Toggle floats ing unsur apa wae, ing sembarang breakpoint, nggunakake utilitas float responsif.

Ing kaca iki

Ringkesan

Kelas utilitas iki ngambang unsur ing sisih kiwa utawa tengen, utawa mateni floating, adhedhasar ukuran viewport saiki nggunakake properti CSSfloat . !importantkalebu kanggo ngindhari masalah spesifik. Iki nggunakake breakpoints viewport padha karo sistem kothak kita. Wigati dimangerteni yen utilitas float ora duwe pengaruh marang barang fleksibel.

Ngambang wiwitan ing kabeh ukuran viewport

Ngambang pungkasan ing kabeh ukuran viewport

Aja ngambang ing kabeh ukuran viewport

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>

Responsif

Variasi responsif uga ana kanggo saben floatnilai.

Ngambang wiwitan ing viewports ukuran SM (cilik) utawa luwih amba

Ngambang wiwitan ing viewports ukuran MD (sedheng) utawa luwih

Ngambang wiwitan ing viewport ukuran LG (gedhe) utawa luwih amba

Ngambang wiwitan ing viewports ukuran XL (ekstra-gedhe) utawa luwih amba

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>

Ing ngisor iki kabeh kelas dhukungan:

.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

Utilitas ngambang diumumake ing API keperluan kita ing scss/_utilities.scss. Sinau carane nggunakake API keperluan.

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