Bootstrap الكلاسات الاساسية

Bootstrap الكلاسات الاساسية Content

اليوم هدفنا نعرفك ع الوثائق documents الخاصة ب bootstrap لانو مطلوب منك تروح تشوف الكلاسات الموجودة و كيف تستعملا لحالك..

المحتوى:
– النصوص
– الصور
– القوائم
– الازرار

النصوص

من موقع getbootstrap.com فوت ع الوثائق document
ع يسار الموقع في قائمة الخيارات و الاقسام Getting started , layout , content …

رح نبلش بالكلاسات الاساسية الموجودة بقسم content
من قسم content رح تلاقي قائمة فرعية متل Reboot ,Typography
كل وحدة منا الها قائمة فرعية ع يمين الموقع

منرحع منذكر انو مو هدفنا نشرح كل الكلاسات الموجود هي مهمتك تقرا الوثائق و تشوفها رح نشرح الالية و الكلاسات الاساسية

– كلاسات النصوص

من content روح ع نصوص Typography و تصفح الصفحة
اول كلاس رح نتعلمه هو display من القائمة الفرعية ع يمين الموقع اختار Display headings

عم يقلك Display headings بتستعمل لنصوص العناوين و لما بدك النص يكون بارز و عاطينك مثال عن النتيجة و تحت مثال عن كود html مع كلاس css
كلشي مطلوب منك تنسخ كود html لعندك و تجربه و تشوف النتيجة واذا بدك فيك تفوت ع ملف bootstrap.css وتشوف الكلاس dispaly-1 كيف معمول وشو الفرق مثلا بين display-1 , display-4

الكلاس التاني يلي رح نتعلم عليه هو lead
من القائمة الفرعية ع يمين الموقع نقي lead
نفس الشي عندك اول شي شرح عم يقلك بتستعملا ل اجزاء النص  يلي بدك تعطيا تصميم مميز مشان تبيين
عاطيك مثال عن النتيجة و الكود لي هو p مع كلاس lead
عمول نسخ و جرب كمان

ملاحظات:
كل الوثائق ع نفس الشكل
عندك اسم الكلاس شرح عنو و صورة النتيحة بعدين كود html مع كلاس css يعني ما عندك حجة ما تقرا لحالك

برجع و بذكر bootstrap هو مجرد كود html مع كلاس css مكتوب مسبقا يعني فيك تعدلو و تتعامل معو بالشكل يلي بدك ياه
يعني مثلا .lead مانك مجبر تحطو مع p و display مع h1 هاد مجرد مثال فيك تعمل يلي بدك ياه و تدمج و تحذف يلي بدك ياه خود راحتك و جرب

طيب سؤال عم تقول في مية كلاس انا كيف بدي احفظون ؟
كبداية مو ضروري تحفطون المهم تتطلع عليهون و تعرف انو موجودين و بس بدك ياهون فيك ترجع ع الوثائق وتشوفون و ما تخاف بعد فترة قصيرة بتحفطون

منرحع ع الكلاسات

– القوائم lists

من القائمة الفرعية ع يمين الموقع lists
اول كلاس list-unstyled بيعطيك قائمة بلا الستايل الافتراضي البشع نفس الشي عندك شرح للكلاس النتيجة و الكود

الكلاس التاني هو list-inline بيعطيك قائمة افقية
عندك النتيجة و الكود وهون بتلاحظ اول عنصر شوي معقد يعني عندك اكتر من كلاس لتعطي هل التصميم .list-inline ل عنصر القائمة الاساسي ul و list-inline-item للابن li
وهل الشي رح تشوفو بكتير من الكلاسات الجاي

ملاحظة مشان تسهل عليك حفظ اسم الكلاسات لاحظ انو في الية ثابتة بالتسمية مثلا متل القوائم بتبلش ب list و حاليا اي محرر نصوص عم تستعملو مثلا vscode في تتمة تلقائية يعني بدك كلاس لقائمة بس مو متاكد من اسمو بس كتوب list- و vscode بجبلك كل الكلاسات يلي بتبلش بهل الاسم بتنقي منا
وباقي العناصر نفس الشي

ما رح نشرح اكتي من هيك بكلاسات النصوص خلينا نروح عفكرة تانية

الصور

من القائمة الرئيسية ع يسار الموقع نقي content > images
ورح نحكي عكلاس واحد بيعطيك صور تفاعلية Responsive
هو كلاس img-fluid. وبينضاف للصور مشان تاخد كامل حجم العنصر يلي محطوطة فيه
و هل الشي كتير مفيد لانو حجم العنصر بيغيير حسب حجم الشاشة يعني ع الكمبيوتر غير الموبايل
و بدك الصورة  تغيير حجما حسب العنصر

الازرار

خلصنا من العناصر الاساسية رح نروح ع اول العناصر المتقدمة component ورح نرجع ع الزرار يل مفترض شفتا

رح

طيب ليش ما منعمل كلاس واحد ؟
ما رح جاوب ع هل السوال روح ع bootstrap.css وشوف الكلاس الاساسي و الكلاسات التانية بتعرف لحالك

طيب سؤال تاني ليش اسماء الكلاسات هيك! … يعني ليش الازرق اسمو primary مو blue و الاخضر successes مو green ؟
سؤال حلو و مهم
bootstrap بيتسعمل هل النظام بكل الوان العناصر مو بس الزرار ليش ؟
الموقع بالعادة بكون الو لون رئيسي و لون ثانوي مثلا احمر و ازرق و الوان تانية بتستعمل متل التنبيه ع خطأ و غيره و هي الالوان تغيرا حسب كيفك
bootstrap بيستعمل نفس فكرة primary و secondary بدل من اسم اللون لانو اللون ممكن يتغير يعني ممكن تبلش الموقع باللون الاحمر كلون اساسي
وتستعمل كلاس اسمو red بس بعدين يقرر تغيير اللون ع رماي وقتا بدك تنجبر تغيير اسم الكلاس بكل محل مستعملو و هي مشكلة
بينما هلأ انت مستعمل اسم عام لون رئيسي و لون ثانوي وهيك بتغيير بس اللون بكلاس css
هلأ اذا بدك لون اساسي غير الازرق فيك تغيير ببساطة ورح نجكي عن افضل طرق التغيير و التخصيص بعدين

المقال الجاي

رح نبلش بالكلاسات المساعدة