Bootstrap العناصر المتقدمة

العناصر المتقدمة components

بهل الدرس الجديد من تعلم bootstrap رح نشوف العناسر المتقدمة components

هون الموضوع صار اكتر من كلاس صار كود html كامل مع اكتر من كلاس css يعني صار عنصر component كامل لهيك مهم انك تكون صرت مرتاح وفهمان فكرة bootstrap وكيف بتتعامل مع كلاسات قبل ما نبلش

المحتوى :
– form
– navbar
– card

form

من القائمة ع يسار الموقع components > forms
الاستمارة form من العناصر يلي ما في موقع ما بيتسعملا لهيك bootstrap في عدد كبير من الكلاسات يلي بتاملك خيارات كتيرة
نحن رح نشرح الفورم الاساسي والاضافات نخليا لالك لانو الموضوع بسيط و بكون اضافة كلاس مو اكتر

الفورم الاساسي في كود html كبير و كومة كلاسات bootstrap لهيك خلينا نبلش بالمثال الاول و نشرح

بعد عنصر form رح تلاقي في تلت مجموعات ادخال email , password, checkbox  اذا شفت كود html تحت المثال رح تلاقي شي مشترك
كل عنصر ادخال محطوط جوا div مع كلاس form-group وهي اول شغلة بدنا نتعلما ب

bootstrap اي عنصر ادخال بدك تضيفو بدو يكون ب div مع كلاس .form-group

طيب نجي ع كل عنصر ادخال لحال كل العناصر بتجي ع شكل label وتحتا عنصر ادخال
جميع عناصر الادخال متل input , select باستثناء radio و check متشابهين من ناحية الكلاسات

عنصر الادخال بياخد كلاس .form-control و label بياخد واصفة for مع قيمة هي id عنصر الادخال
مثلا input مع id=”email” قيمة for بتكون for=”email “

radio , check button الون html مختلفة مع كلاسات خاصة فيون
div  الاساسي بياخد form-check كلاس بالاضافة form-groupe
input الها كلاس form-check-input و label كلاس form-ckeck-class  مثلا

==========================
<div class="form-group form-check">
<input type="checkbox" class="form-check-input"

id=”exampleCheck1″>
<label class=”form-check-label”

for=”exampleCheck1″>Check me out</label>
</div>
==========================
في عدد كبير من الكلاسات المساعدة والاضافات و الشغلات لي فيك تغيرا عن طريق اضافة كلاس جديد او تغير بسيط ب html لهيك رح نخليك تتطلع عليهون لحالك

navbar

navbar من العناصر الهامة وكل موقع ببلش عادة ب navbar  فيا الاختصارات الاساسية لتتجول بالموقع و ممكن خيار بحث
كود html كبير وكتير من كلاسات لهيك رح نبلش سطر سطر
بس اول شي خلينا نفهم قصة مهمة و هي responsive صغر المتصفح عندك كبوس ع زر التصغير جنب زر الاغلاق الاحمر بالزاوية و صغر حجم المتصفح
وانتبه هع شكل navbar كيف رح يختلف بس يصغر المتصفح و يتحول ل شعار الموقع و زر قائمة بس

طيب هلأ خلونا نبلش سطر سطر
اول سطر في عندك nav مع كلاس navbar و كلاسين navbar-light bg-light وهدول بحددو لون navbar وفي عندك نوعين فاتح و غامق navbar-light او navbar-dark
الكلاس التاني هو كلاس مساعد للون الخلفية و مفترض تعرفو و فيك تغيرو و تستعمل اي كلاس لون تاني

السطر التاني هو ببساطو شعار الموقع رابط مع كلاس navbar-brand
السطر التالت – الخامس هو الزر يلي شفناه لما صغرنا navbar و انتبه انو بياخد واصفة data-targrt هي قيمة id تبع navbar تحت يعني اذا غيرت
id بدك ترجع وتغيره هون كمان مشان يشتغل

السطور بعد هيك هي محتوى navbar عندك div مع كلاس collapse navbar-

collapse يعني هاد الجزء لما يتصغر الشريط رح تختفي و بنضب بالقائمة

كل html الجاي هو محتوى navbar يعني بمثالنا هاد الروابط و القائمة المنسدلة و خانة البحث

اول شي منستعمل ul مع كلاس navbar-nav و عناصر li مع كلاس nav-item لننظم الروابط الروابط a مع كلاس nav-link

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

card

من كم سنة صارت cards من الاساسيات بالتصميم و صارت عنصر اساسي باي موقع
كود card كتير بسيط و مباشر و ببتالف بالعادة من صورة و جسم فيه عنوان نص و زر
في كتير شغلات ممكن تغيرا باضافة كلاس او تعديل الكود بس بشكل عام الموضوع بسيط

المقال الجاي

 رح نحكي ع اهم شي وهو responsive وطريقة تصميم موقع بيشتغل ع اي حجم شاشة سواء موبايل لابتوت او تابليت