شارك هذا المقال:
كيف يعمل النظام الشبكي في Bootstrap4؟
بعد ظهور النسخة الأخيرة من البوتستراب وردنا الكثير من الأسئلة هل أنا مضطر لتعلم النسخة الأخيرة من البوتستراب؟ ماهو الاختلاف بين النسختين 3 و4؟ وما هو التقسيم الشبكي؟
نقدم لكم في هذه المقالة شرحاً وافياً للتعرف على المبادئ المعتمدة في Bootstrap4، لنبدأ معاً....
ما معنى Grid system؟
يستخدم البوتستراب النظام الشبكي للتخطيط وتحديداً لتخطيط الصفحة بشكل متجاوب، لذلك فإن فهم معنى النظام الشبكي أمر أساسي لفهم البوتستراب.
تتكون الشبكة من مجموعة من الصفوف والأعمدة داخل حاوية واحدة (container) أو أكثر.وبإمكانك استخدام النظام الشبكي بشكل مستقل بدون استخدام كل ملفات البوتستراب 4 وذلك عن طريق تحميل الملف bootstrap-grid.css
من الموقع الرسمي: https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files
وستلاحظ مدى سهولة استخدامه، مثلاً إذا أردت تقسيم صفحتك إلى سطر يحوي ثلاثة أعمدة تكتب الكود كما يلي:
<div class="container">
<div class="row">
<div class="col">
<h4>Left column</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<div class="col">
<h4>Center column</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<div class="col">
<h4>Right column</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
</div>وتظهر النتيجة كما يلي:
تذكر دائماً أننا نستخدم container لتغليف row (الحاوية لتغليف الصف) والذي بدوره يتضمن الأعمدة col.
أي container هو العنصر الجذر في النظام الشبكي ولا يمكنك تجاهله لأنه يتحكم في عرض التخطيط ويتم استخدامه لجعل المحاذاة للأعمدة متساوية من اليمين واليسار داخل مستعرض الويب.
يوفر إطار العمل بوتستراب 4 نوعين من الcontainer:
Container بعرض ثابت ويأخذ اسم الصف container، يتم تعديل العرض وفقاً لحجم الشاشة فيصغر معها ويصبح في الشاشات الصغيرة بكامل عرضها
Container بالعرض الكامل للشاشة ويأخذ اسم الصف container-fluid
وبالطبع يمكنك استخدام أكثر من container في الصفحة الواحدة وهذا يعتمد على الطريقة التي تريد أن تبني بها صفحتك!
ومن المهم أن تضع الصفوف ضمن container لأن .row من خصائصه هوامش خارجية (margin) من اليمين واليسار بقيمة -15 بكسل وال.container من خصائصه هوامش داخلية (padding) بقيمة 15 بكسل وذلك للحفاظ على محاذاة المحتوى بالتساوي على الحواف من اليمين واليسار.
أما اذا وضعت الصف بدون حاوية فستلاحظ ظهور شريط تمرير أفقي بالتأكيد أنت لا ترغب به!
بالنسبة للصف...فكر به دائماً أنه مجموعة من الأعمدة فهو يحتوي عمود واحد أو أكثر ومن الخاطئ جداً أن تقوم بوضع المحتوى مباشرةً ضمن الصف بدون أي عمود.
لاحظ أيضاً بما أن الrow يأخذ خاصية display:flex فهذا يعني أن أبناءه الأعمدة ستكون بنفس الطول بغض النظر عن محتواها.
ملاحظات مهمة بالنسبة للأعمدة:
يمكنك إنشاء تقسيمات أفقية للشاشة
يمكن للأعمدة أن يكون لها عرض محدد يختلف من عمود لآخر
يمكن ان يتغير العرض حسب قياس الشاشة
الأعمدة في نفس السطر لها نفس الطول
يمكن أن يزيد أو ينقص عرضه
يمكن أن تحتوي أسطر وأعمدة
العمود هو الابن المباشر للصف والتقسيم الشبكي الكلاسيكي للبوتستراب هو 12 عمود في السطر ولذلك إذا أردت مثلاً تقسيم السطر عدة تقسيمات أفقية متساوية تقوم بتقسيم 12 على عدد التقسيمات الذي تريده فإذا أردت تقسيم السطر إلى 4 أعمدة متساوية12/4=3 أي كل تقسيمة لها مكان وحدتين أعمدة ويأخذ كل عمود الصف col-3
ويصبح الكود بالشكل:
<div class="container">
<div class="row">
<div class="col-3">
<h4>Left column</h4>
<p> Lorem ipsum dolor sit amet, d est laborum. </p>
</div>
<div class="col-3">
<h4>Center column</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<div class="col-3">
<h4>Right column</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<div class="col-3">
<h4>Right column</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
</div>والنتيجة كالشكل:
ويمكنك جعل أحد الأعمدة يأخذ نصف الصف مثلاً بأن تعطيه اسم صف .col-6 لأن 12/2=6 وبذلك يكون عرضه أكبر من العمود ذو اسم الصف .col-4
الإضافة الرائعة للبوتستراب 4 هو أنه بإمكانك جعل عرض الأعمدة يتناسب مع محتواها وذلك بإعطاء العمود صف .col-auto بدون تحديد للنسبة التي تريد أن يحتلها العمود من 12.
ولجعل تصميمك متجاوب يمكنك ذلك ببساطة بتحديد عدد الوحدات الذي يحتلها العمود حسب كل شاشة فمثلاً إذا كنت تريد أن يكون العمود يأخذ ربع العرض الكامل في الشاشات الكبيرة (12/4=3) والنصف في الشاشات المتوسطة (12/2=6) وكامل العرض في الشاشة الصغيرة (12/1=12) فنكتب الكود الخاص بالعمود بالشكل:
<div class="col-lg-3 col-md-6 col-sm-12"></div>يمكنك أيضاً تغيير ترتيب الأعمدة في الشاشات المختلفة فإذا كنت تريد لعمود أن يكون أول عمود في الشاشة المتوسطة كل ماعليك هو إضافة اسم الصف .order-md-first ليظهر أولاً في الشاشة المتوسطة.
نود أن نضيف تنويه صغير بخصوص القياسات الدقيقة للشاشات:
xs: عرض الشاشة أصغر من 576px
sm: عرض الشاشة أكبر أو يساوي 576px
md: عرض الشاشة أكبر أو يساوي 768px
lg: عرض الشاشة أكبر أو يساوي 992px
xl: عرض الشاشة أكبر أو يساوي 1200px
بالطبع أنت لست مجبراً على تعلم النسخة الأخيرة من البوتستراب فيمكنك الاعتماد كلياً على Bootstrap 3 لبناء موقع متجاوب ولكن تعلمه سيوفر لك الاستفادة من ميزاته الجديدة ويمنحك قابلية البقاء على تماس مع كل ماهو جديد في عالم الويب وثق تماماً بأنه لن يأخذ منك الكثير من الوقت كونك تتقن Bootstrap 3.
