الدرس الرابع : تكويد مكان نشر المقالات

السلام عليكم ورحمة الله وبركاته
درس اليوم حول تكويد مكان لنشر البوستات
وكما تنذكر كان هذا هو التصميم البسيط الذى اعمل عليه
 
 
كما نلاحظ فالموضوع بسيط علينا بتقسم الصفحة بنظام Bootstrap الى جزئين جزء خاص ب sidebar وجزء خاص بمكان نشر posts كتالى
نسبة sidebar كما نلاحظ  الثلث ونسبة مكان posts الثلثين من عرض الصفحة
بالتالى تكون الكلاسات على Bootstrap Grid System col-md-3 لل sidebar و col-md-9 لمكان posts

فتكون التركيبة كتالى

 
 

 

 

ونقوم بكتابة الكود الخاص بال posts مكان التعليق <!– posts here –>

كود HTML الخاص ب posts

 

الجزء الخاص بالتصفح paggination فى نهاية المقالات

 

 

شرح الكود

  • قمنا هنا بكتابة مقالة واحدة فقط ويمكن تكرارها عدد مناسب من المرات
  • نلاحظ فى الكود السابق وجود row ومقسم بالنصف الى col-md-6 و col-md-6 لكلًا من الصورة وجسم المقالة
  • بالتالى تتضح فكرة وجود صفوف داخل صفوف اخرى

 

كود CSS
 
 

لو رجعنا لاخر كود خاص بالهيدر

 

 

نجد ان لاحاجة لاعادة كتابة الكلاس container
ونكتفى بوضع row فى مكان التعليق  <!– posts and slider row here –> فقط
الى هنا ننتهى من درس اليوم وشكرًا لكم

دروس الدورة 
 

شاركه مع اصدقائك

كتب بواسطة admin

مؤسس مطور

التعليقات

اترك تعليقك

شاركنا بتعليقاتك حول الموضوع

*

Comments