انتقل إلى محتوى الدرس

BootStrap Responsive Floats المحاذاة المتجاوبة في bootstrap

ستتعلم في هذا الدرس عمل styling لكثير من elements العناصر وجعلها more responsive اكثر تجاوبا بدون كتابة كود CSS وذلك باستخدام اطار عمل bootstrap.

1 صفوف تعليمية
Bootstrap
3,170 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
  • يتم عمل محاذاة بشكل عام باستخدام كلاس float-left او float-right.
  • لالغاء عمل float نستعمل كلاس float-none.
  • لعمل محاذاة متجاوبة مع عرض الشاشة يتم استخدام كلاس float-*-end | start, حيث * تمثل حجم الشاشة ولها 5 قيم كما هو موضح في الجدول التالي:
قيمة * sm md lg xl xxl
حجم الشاشة 576px=< 768px=< 992px=< 1200px=< 1400px=<



Responsive Float

عمل محاذاة متجاوبة مع عرض الشاشة.

HTML
<div class="float-sm-right">Float right on small screens or wider</div>
<div class="float-md-right">Float right on medium screens or wider</div>