Bootstrap نظام responsive

Bootstrap نظام responsive

قبل bootstrap ومع انتشار اجهوة الموبايل و التابلت تصميم موقع بيشتغل مع كل هل الاجهزة كان مهمة صعبة و شبه مستحيلة و احيانا
وصلت لتصميم مواقع مختلفة لكل جهاز مثلا موقع للكمبيوتو وموقع للموبايل
كان في عدة محاولات لحل الازمة و الابرز كانت bootstrap grid system

بداية

اكيد وانت عم تقرا الوثائق documents واحيانا ونحن عم نشرح كان في كلاسات متل -sm -lg -md هي الكلاسات يلي ما شرحناها هي كلاسات responsive و تركناها للاخير لانو الاهم و الاكثر استعمالا

طيب خلينا نكون متاكدين انك فهمان المشكلة يلي عم نواجها
عندك بالبيت حاليا في ع الاغلب كذا جهاز فيك تفوت منو ع الانترنت لابتوب موبايل تابلت وحتى تلفزيون يعني تقريبا باي بيت في 10 اجهزة ع القليلة
وكل واحد منو ع الاغلب الو حجم شاشة مختلفة تخيل لو انك فتت ع الموقع من كل جهاز من هي الاجهزة كيف بدك تضمن انو الموقع و التجربة هي نفسا
لكل المستخدمين بدون ما ترجع تعيد كتابة ال CSS لكل حجم

توزيع الشاشات في bootstrap

bootstrap بيستعمل عدة اختصارات لتمميز حجم الشاشة
بلا اي اسم تطبق ع الكل
sm تطبق ع الشاشات الصغيرة و طلوع ( ≥576px ) اغلب الموبايلات
md تطبق ع الشاشات المتوسطة و طلوع ( ≥768px ) التابلت و الوبايلات في حالة العرض الافقي
lg تطبق ع الشاشات الكبيرة و طلوع ( ≥992px ) اغلب للابتوبات
xl تطبق ع الشاشات الاكبر و طلوع ( 1140px ) اللابتوبات شاشات كبيرة و شاشات التلفاز الذكي

طيب شو يعني ؟
تتذكرو بكود navbar الماضي كان في كلاس ما شرحناه navbar-expand-lg هاد الكلاس باخره -lg يعين navbar بتصغر عند حجم شاشة كبير وفيك تغيره
ل navbar-expand-md مثلا اذا بدك navbar يصغر ع قياس متوسط و هيك

bootstrap Grid system

نطام grid بيسمحلك تحدد حجم و موضع العناصر حسب حجم الشاشة بطريقة سهلة
مثلا اذا عندك اربع صور منتجات جنب بعض التصميم رح يكو حلو ع شاشة لابتوب بس ع شاشة تابلت الصور رح تكون كتير ضيقة و ع شاشة موبايل الصور ما رح تكون مبينة حتى
نطام grid بيسمحلك تعمل التصميم اربع صور جنب بعض اذا الشاشة لابتوب و صورتين جنب بعض اذا شاشة تابلت و صورة صورة تحت بعض اذا الشاشة موبايل بكل بساكة وبدون ما تكتب كتير css و html

من القائمة ع يسار الموقع layout
اول كلاسات رح نتعلما هي container وهي كلاسين بحددو عرض الموقع حسب عرض الشاشة وبينحطو اول كلاس بعد body
fluid-container بحدد عرض الموقع على كامل عرض الشاشة يعني صغرت بيصغر كبرت بيكبر وهاد تصميم شائع جدا
container بحدد عرض الموقع بشكل ثابت حسب الشاشة وبيترك مسافة ع يمين و يسار الموقع وهو تصميم رجع مؤخرا يستعمل

نظام grid

من القائمة ع يسار الموقع layout >> grid
نظام grid بقسم الشاشة ل 12 عامود col
وبيتالف بشكل اساسي من كلاسين row و col

كلاس row هو كلاس حافظة لل col وكل سطر من الشاشة لازم تنحط ب row لحالا (بعدين منشرح)

كلاسات grid اسما على الشكل التالي col-screensize-width مثلا col-md-6 او col-sm-9
الكلاس ببلش ب col- بعدين screensize و هيه الاختصارات يلي حكيناها فوق (,sm ,md, lg,xl , nothing) وهدول لازم تحفظون
و width يلي هي رقم من 1-12 (متل ما حكينا الشاشة مقسمة ل 12 عامود col) مثلا 6 يعني نص عرض الشاشة

طيب شو هل الحكي ؟

نرجع لمثالنا فوق عندك اربع صور منتجات بدنا التصميم اربع صور جنب بعض اذا الشاشة لابتوب و صورتين جنب بعض اذا شاشة تابلت و صورة صورة تحت بعض اذا الشاشة موبايل
الكود رحي يبلش ع هل الشكل
=========================
<img src="" />
<img src="" />
<img src="" />
<img src="" />

=========================
بالعادة الشغل ببلش تصميم من الموبايل و طلوع (مو قاعدة عمول يلي بريحك)
بدنا ع الموبايل الصور تجي كل تحت بعضا يعني كل صورة تكون ع كامل عرض الشاشة
لهيك منضيف الكلاس col-sm-12 موبايل sm كامل عرض الشاشة 12

طيب بعدين رح نطلع ع الشاشة الاعرض تابلت و موبايل بحالة الافقي
بدنا صورتين جنب بعض و تحتون صورتين التانيات يعني الصورة نص عرض الشاشة
لهيك منضيف الكلاس col-md-6 تابلت md نص عرض الشاشة يعني 6

بعدين رح نطلع ع الشاشات اكبر متل اللابتوبات
بدنا الاربع صور جنب بعض يعني الصورةربع عرض الشاشة
لهيك منضيف الكلاس col-lg-3 لابتوب lg ربع عرض الشاشة يعني 3
يعني بصير الكود
=========================
<img class="col-sm-12 col-md-6 col-lg-3" />
<img class="col-sm-12 col-md-6 col-lg-3" />
<img class="col-sm-12 col-md-6 col-lg-3" />
<img class="col-sm-12 col-md-6 col-lg-3" />

=========================

شو مشان الشاشات الاكبر ؟
نحن بدنا التصميم يتم اربع صور مهما كبر الشاشة اكتر و مافي داعي لنضيف كلاس col-xl-3 لانو الكلاس col-lg-3 بيشتغل ع شاشات اللابتوب و الاكبر

وبالاخير الكود فوق كله لازم يكون ضمن كلاس row
يعني
<div clas="row">
<img class="col-sm-12 col-md-6 col-lg-3" />
<img class="col-sm-12 col-md-6 col-lg-3" />
<img class="col-sm-12 col-md-6 col-lg-3" />
<img class="col-sm-12 col-md-6 col-lg-3" />
</div>

 

التداخل

الفكرة فوق كتير بسيطة بس بدا وقت و تدريب منيح لانو كتير اساسية
بس بعد ما تتمكن منا ع الاغلب رح تحاول تعمل اشكال مقعدة وقتا رح تعمل تداخل بالكلاسات

فرضا بدك تصميم الشاشة مقسوم بالنص قسم يميني و قسم يساري وبدك القسم اليساري كمان مقسوم 3 اقسام كيف بدك تعملا ؟
جرب … الكود رح يكون قريب من هاد
===========================
<div class="row" >
// left section
<div class="col-6">
// innre section
<div class="row" >
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
</div>

//right section
<div class=col-6″>
</div>

</div>
===========================
طيب شو لاحظنا بالمثال فوق ؟
اول شي فيك تعمل تداخل بالاقسام
كل قسم مقسم ل 12 عامود كمان … يعني اذا عندك قسم عرضه نص شاشة col-6 جواه هاد القسم بتقسمو لتلت اقسام كل منها 4-col

row

row افتراضيا بضيف 15px ع يمين و يسار كل col
اذا بدك col بلا اي فراغات بين بعضون فيك تضيف كلاس no-gutters لل row

المقال الجاي

المقال الجاي رح يكون الاخير رح نحاول نجاوب فيه ع اي سوال بقي عندك