آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

بررسی اجمالی 

این کلاسهای ابزار شنا یک عنصر را به سمت چپ یا راست و یا غیرفعال کردن شناور، بر اساس اندازه نمایشگر فعلی با استفاده از ویژگی شناور CSS شناور می کند. مهم است برای جلوگیری از مسائل خاصی گنجانده شده است. این ها از نقطه های نمایش viewport به عنوان سیستم شبکه بوت استرپ استفاده می کنند.

 

کلاس ها 

یک شناور با یک کلاس را تغییر دهید:

Float left on all viewport sizes

 

Float right on all viewport sizes

 

Don't float on all viewport sizes

 

 <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

یا توسط Sass mixin:

 

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

 

ریسپانسیو

تنوع ریسپانسیو نیز برای هر مقدار شناور وجود دارد.
Float left on viewports sized SM (small) or wider
 
Float left on viewports sized MD (medium) or wider
 
Float left on viewports sized LG (large) or wider
 
Float left on viewports sized XL (extra-large) or wider

 

 <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