Source

Йөзү

Безнең җаваплы йөзү программаларын кулланып, теләсә нинди элементта, теләсә нинди ноктада йөзә.

Гомуми күзәтү

Бу файдалы класслар элементны сулга яки уңга йөзәләр, яки CSS floatмилеген кулланып хәзерге күренеш зурлыгына нигезләнеп йөзүне сүндерәләр . !importantконкрет проблемалардан саклану өчен кертелгән. Алар безнең челтәр системасы белән бер үк күренеш нокталарын кулланалар.

Дәресләр

Класс белән йөзүне алыштырыгыз:

Барлык күренеш зурлыкларында йөзү

Барлык күренеш зурлыкларында йөзегез

Барлык күренеш зурлыкларында йөзмәгез
<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>

Миксинс

Яисә Сасс миксин белән:

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

Onsаваплы

Valueәрбер кыйммәт өчен җаваплы вариацияләр дә бар float.

SM (кечкенә) яки киңрәк күренешләрдә калдырылган йөзү

МД (урта) яки киңрәк күренешләрдә калдырылган йөзү

LG (зур) яки киңрәк күренешләрдә калдырылган йөзү

Флот XL зурлыгында (зуррак) яки киңрәк

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

Менә барлык ярдәм класслары;

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