Source

Driuwe

Skeakelje driuwers op elk elemint, oer elk brekpunt, mei ús responsive float-hulpprogramma's.

Oersicht

Dizze nutklassen driuwe in elemint nei lofts of rjochts, of skeakelje driuwend út, basearre op de hjoeddeistige viewportgrutte mei it CSS - floateigenskip . !importantis opnommen om spesifisiteitsproblemen te foarkommen. Dizze brûke deselde viewport breakpoints as ús rastersysteem. Tink derom dat float-nutsbedriuwen gjin ynfloed hawwe op flexitems.

Klassen

Skeakelje in float mei in klasse:

Float lofts op alle viewport maten

Float rjocht op alle viewport maten

Float net op alle viewportgrutte 
<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>

Mixins

Of troch Sass mixin:

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

Responsive

Responsive fariaasjes besteane ek foar elke floatwearde.

Float lofts op viewports grutte SM (lyts) of breder

Float lofts op viewports grutte MD (medium) of breder

Float lofts op viewports grutte LG (grut) of breder

Float lofts op viewports grutte XL (ekstra-grut) of breder 

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

Hjir binne alle stipeklassen;

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