in English
Kellua
Vaihtele kellukkeita missä tahansa elementissä missä tahansa keskeytyspisteessä käyttämällä reagoivia kelluvia apuohjelmia.
Tällä sivulla
Yleiskatsaus
Nämä hyödyllisyysluokat kelluttavat elementin vasemmalle tai oikealle tai poistavat kellumisen käytöstä nykyisen näkymän koon perusteella käyttämällä CSS - float
ominaisuutta . !important
on mukana erityisongelmien välttämiseksi. Nämä käyttävät samoja katseluikkunoiden keskeytyspisteitä kuin ruudukkojärjestelmämme. Huomaa, että float-apuohjelmat eivät vaikuta joustaviin tuotteisiin.
Float-aloitus kaikissa näkymäkokoissa
Kelluva pää kaikissa näkymäkokoissa
Älä kellu kaikissa näkymäkokoissa
<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>
Responsiivinen
float
Jokaiselle arvolle on myös reagoivia muunnelmia .
Kelluntaaloitus SM (pieni) tai sitä leveämmistä kuvaporteista
Float-aloitus MD (keskikoko) tai sitä leveämmistä katseluporteista
Float-aloitus LG:n (suuri) tai leveämmille kuvaporteille
Float-aloitus XL-koon (erittäin iso) tai leveämmistä kuvaporteista
<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>
Tässä ovat kaikki tukiluokat:
.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-apuohjelmat on ilmoitettu utilities API:ssa scss/_utilities.scss
. Opi käyttämään apuohjelmien sovellusliittymää.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),