Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
Check
in English

Flosilo

Ŝanĝu flosiloj sur iu ajn elemento, trans ajna rompopunkto, uzante niajn respondemajn flosilajn utilecojn.

Sur ĉi tiu paĝo

Superrigardo

Ĉi tiuj utilaj klasoj flosas elementon maldekstren aŭ dekstren, aŭ malŝaltas flosadon, surbaze de la nuna vidfenestrograndeco uzante la CSS- floatposedaĵon . !importantestas inkluzivita por eviti specifecajn problemojn. Ĉi tiuj uzas la samajn vidpunktojn kiel nia kradsistemo. Bonvolu konscii, ke flosaj utilecoj ne efikas sur flekseblaj eroj.

Flotkomenco sur ĉiuj grandecoj de vidpunkto

Flosu fino sur ĉiuj grandecoj de vidpunkto

Ne flosu sur ĉiuj grandecoj de vidpunkto
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>

Respondema

Respondema varioj ankaŭ ekzistas por ĉiu floatvaloro.

Flosigo komenciĝas sur vidfendoj grandeco SM (malgranda) aŭ pli larĝa

Flosigo komenciĝas sur vidfendoj grandeco MD (meza) aŭ pli larĝa

Flosigo starto sur vidfendoj grandeco LG (granda) aŭ pli larĝa

Flosigo komenciĝas sur vidfenestroj XL (ekstregrandaj) aŭ pli larĝaj

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>

Jen ĉiuj subtenaj klasoj:

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

Utilaĵoj API

Float-utilaĵoj estas deklaritaj en nia utileco API en scss/_utilities.scss. Lernu kiel uzi la utilecojn API.

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