اليوم بتكلم عن Bootstrap grid system والموضوع مهم جدا لانك راح تتعلم مفهوم والمفهوم هذا نفسه موجود بباقي مكتبات الـ css مع اختلافات بسيطة جدا @PrograminLovers
بالبداية للي مايعرف وشو الـ bootstrap هو مكتبة تستخدم css و javascript بحيث انها تعطيك حاجات رهيبة جاهزة تقدر تستخدمها في صفحتك وتكون متناسقة مع جميع احجام الشاشات (responsive)!
الـ bootstrap grid system يخليك تقسم صفحتك بالشكل اللي يناسبك عن طريق ثلاث كلاسات راح افصل فيهم :
container , row , col
container , row , col
الـ container حاوية تحويهم كلهم وهو راح يعطيك padding , width متناسق مع احجام الشاشات
الـ row وهو صف وبداخله تحط كم عدد الأعمدة اللي تبيها (col) بحيث ان الصفحة مقسمة على 12 column !
الـ row وهو صف وبداخله تحط كم عدد الأعمدة اللي تبيها (col) بحيث ان الصفحة مقسمة على 12 column !
لو نلاحظ هنا انه عندنا 2 rows الأول يحتوي على عامودين ف قسمهم نصين 50 50 والصف الثاني يحتوي على ثلاث أعمدة وزعهم بالتساوي
طيب لو عندك أكثر من card وتبي تقسمهم على حسب مقاس الشاشة مثلا لو الشاشة كبيرة تبيهم على اربع أعمدة واذا الشاشة صغيرة تبيهم على عامودين بس فهنا الـ bootstrap معطيك خمس احجام مختلفة تقدر تلعب فيهم على راحتك
وعشان ابسط الموضوع أكثر خلونا نطبق موضوع الـ card بمثال ف بحط لكل card الكلاس هذا col-lg-4 ومعناته ماراح اسوي شي الين يوصل مقاس الشاشة عندي 992px أو اكثر ف هنا انا قسمته على الشاشات الكبيرة بس باقي اقسمه على اي شي أصغر من992pxفهنا احتاج ازيد الكلاسcol-6 وكذا قسمتهم بالشكل المطلوب
وهنا النتيجة بحجم أكبر وأقل من 992
اعذروني عالاطالة بس الموضوع كان يحتاجله شوي تفصيل وإن شاء الله اذا لقيت فيه تفاعل كويس راح ابدا انزل أشياء أعمق وأحسن من كذا بحول الله
جاري تحميل الاقتراحات...