Source

шино кардан

Бо истифода аз утилитаҳои шинокунандаи ҷавобгӯи мо шинокунакҳоро дар ҳама гуна элемент, дар тамоми нуқтаи кандашавӣ иваз кунед.

Барраси

Ин синфҳои утилитаҳо унсурро ба чап ё рост шино мекунанд ё шиноварро дар асоси андозаи ҷории намоиш бо истифода аз моликияти CSSfloat ғайрифаъол мекунанд. !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>

Миксинҳо

Ё аз ҷониби Sass mixin:

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

Ҷавобгар

Вариантҳои ҷавобӣ низ барои ҳар як floatарзиш вуҷуд доранд.

Дар майдонҳои намоишии андозаи SM (хурд) ё васеътар ба чап шино кунед

Дар майдонҳои намоишии андозаи MD (миёна) ё васеътар аз чап шино кунед

Дар намоишгоҳҳои андозаи 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