من زمان ما كتبت ثريد واليوم بيكون عن موضوع جميل
وهو اكثر مكتبة تستخدم لل css
Bootstrap
@PrograminLovers
#programinglovers
وهو اكثر مكتبة تستخدم لل css
Bootstrap
@PrograminLovers
#programinglovers
بكل بساطة ال bootstrap عبارة عن مكتبة css تستخدم ملفات javascript و css عشان تسهل تصميم الصفحة
مجموعة كلاسات ترتب الصفحة وتصير Responsive design
بحيث اذا تغيرت مقاسات الصفحة يتغير تشكيل المحتوى بناء على ذلك
مجموعة كلاسات ترتب الصفحة وتصير Responsive design
بحيث اذا تغيرت مقاسات الصفحة يتغير تشكيل المحتوى بناء على ذلك
Boostrap Components
بالبوتستراب تقدر تسهل على نفسك شغل كثير بال css وتقدر تسوي اشياء كثيره بس بإضافة كلاسات بسيطة
الصورتين مثال
لو تلاحظون كلاس btn هو اللي مشكل ومحجم الزر
وكلاس btn-primary معطي اللون
بالبوتستراب تقدر تسهل على نفسك شغل كثير بال css وتقدر تسوي اشياء كثيره بس بإضافة كلاسات بسيطة
الصورتين مثال
لو تلاحظون كلاس btn هو اللي مشكل ومحجم الزر
وكلاس btn-primary معطي اللون
القطع اللي تقدر تسخدمها زي كذا كثيره وبنهاية الثريد بحط مصادر تساعدك تستخدمها في مكانها الصحيح
الحين ابي اركز على كيف تقدر ترتب محتوى الصفحة بال bootstrap لأن هذي بالنسبة اهم ما يميز ال bootstrap
الحين ابي اركز على كيف تقدر ترتب محتوى الصفحة بال bootstrap لأن هذي بالنسبة اهم ما يميز ال bootstrap
Bootstrap Grid system
البوتستراب يستخدم خاصية ال flex-box من ال css عشان تقدر تتحكم بمحتوى الصفحة كيف يكون
تحتاج ثلاث كلاسات اساسية
Container
Row
Col (column)
لو تلاحظون الصور تغيير بسيط بس بحجم الصفحة غير ترتيب المحتوى
البوتستراب يستخدم خاصية ال flex-box من ال css عشان تقدر تتحكم بمحتوى الصفحة كيف يكون
تحتاج ثلاث كلاسات اساسية
Container
Row
Col (column)
لو تلاحظون الصور تغيير بسيط بس بحجم الصفحة غير ترتيب المحتوى
Container بتكون الحاوية الاكبر
Row راح يكون الصف اللي يحتوي على الاعمدة
الكلاسين هذي المفروض مايكون فيها اي محتوى تستخدم للترتيب
وسط ال row نستخدم ال col ووسطه يكون المحتوى زي الصور اللي قبل
Col (بدون اي اضافات)
راح يقسم العرض بناء على عدد ال col الموجوده بنفس ال row
Row راح يكون الصف اللي يحتوي على الاعمدة
الكلاسين هذي المفروض مايكون فيها اي محتوى تستخدم للترتيب
وسط ال row نستخدم ال col ووسطه يكون المحتوى زي الصور اللي قبل
Col (بدون اي اضافات)
راح يقسم العرض بناء على عدد ال col الموجوده بنفس ال row
في الصورة الاولى
نلاحظ فيه عامودين في نفس ال row
هذا يعني عرض كل واحد منهم بيكون 50%
وال row الثاني فيه ثلاث أعمدة
بيكون كل واحد 33%
مهما تغير حجم الصفحة
نلاحظ فيه عامودين في نفس ال row
هذا يعني عرض كل واحد منهم بيكون 50%
وال row الثاني فيه ثلاث أعمدة
بيكون كل واحد 33%
مهما تغير حجم الصفحة
طيب حلو الحين نقدر نقسمه لكن نبي التشكيل يتغير مع تغير الصفحة
البوتستراب يعترف بخمس احجام لعرض الشاشة وبناء عليها يتغير وعشان كذا بالمثال الاول الاختلاف البسيط غير لك تشكيل المحتوى
البوتستراب يعترف بخمس احجام لعرض الشاشة وبناء عليها يتغير وعشان كذا بالمثال الاول الاختلاف البسيط غير لك تشكيل المحتوى
نقدر نقسم حجم الاعمدة وتوزيعها على 12
بحيث لو تبي عامودين بنفس الصف ونفس الحجم
يكون كل واحد 6
او اذا تبي واحد حجمه ٦٦% والثاني ٣٣%
يكون الاول ٨ والثاني ٤
مثال ثاني للتوضيح اكثر
ال row الاول ما استخدمنا اي تقسيم
ال row الثاني قسمناه
بحيث لو تبي عامودين بنفس الصف ونفس الحجم
يكون كل واحد 6
او اذا تبي واحد حجمه ٦٦% والثاني ٣٣%
يكون الاول ٨ والثاني ٤
مثال ثاني للتوضيح اكثر
ال row الاول ما استخدمنا اي تقسيم
ال row الثاني قسمناه
الحين نبي نحدد حجم بحيث اذا كان حجم المتصفح اكبر من 576px
ياخذ المقاسات المذكوره
واذا كان اقل راح يكون العرض بالكامل(الافتراضي)
ياخذ المقاسات المذكوره
واذا كان اقل راح يكون العرض بالكامل(الافتراضي)
يهمني انك تفهم كيف توزيع البوتستراب لكل هذي الامور من يوم تفهمها تحويل التصاميم ل html و css راح يكون ولا اسهل
مصادر تهمك:
موقع ال bootstrap
getbootstrap.com
شرح لل flex-box
css-tricks.com
صفحة تختصر لك كلاسات وتشرحها لك
hackerthemes.com
مصادر تهمك:
موقع ال bootstrap
getbootstrap.com
شرح لل flex-box
css-tricks.com
صفحة تختصر لك كلاسات وتشرحها لك
hackerthemes.com
هذا شرح مبدئي بس والبوتستراب الحقيقه يحتاج ممارسه عشان تستوعبه اكثر
وبعد ما تستوعب البوتستراب انصحك تفهم كيف مستخدم ال css عشان تقوي فهمك بالمجال ككل
وبالتوفيق للكل
وبعد ما تستوعب البوتستراب انصحك تفهم كيف مستخدم ال css عشان تقوي فهمك بالمجال ككل
وبالتوفيق للكل
جاري تحميل الاقتراحات...