Bootstrap الكلاسات المساعدة

Bootstrap الكلاسات المساعدة

اليوم رح نتعرف ع كلاسات bootstrap المساعدة utilities

هل الكلاسات هي كلاسات صغيرة بتنضاف للعنصر غالبا مع كلاسات تانية لتضيف ستايل صغير متل اضافة margin لعنصر او تلوين الخط …

المحتوى:
– الكلاسات المساعدة
– الالوان
– المسافات
– الخطوط

الكلاسات المساعدة utilities

من القائمة ع يسار الموقع اختار utilities
الكلاسات المساعدة انعملت لتساعدة بمرحلة التصميم الاولي لموقعك prototyping يعني لما بدك الموقع باسرع وقت او لساتك عم تجرب
وهي كلاسات كتير بسيطة يعني اذا فتت ع bootstrap.css رح تلاقي هل الكلاست عبارة عن تعليمة css وحدة او اتنين باحسن الاحوال

الالوان

حكينا بالبوست الماضي عن نظام الالوان ب bootstrap وقلنا هل النظام موجود تقريبا بكل العناصر مو بس بالازرار ولازم يصير عندك تاقلم تستعملو
واحسن طريقة لهل الشي تشوف كلاس الالوان
من القائمة ع يسار الموقع utilities > colors
رح يطلعلك كومة كلاسات
اول الكلاسات هي كلاسات لون .text- الخط وفيك تستعملا ع اي عنصر كتابي يعني a p h1 …h6 li وين ما بدك يعني و بتغيير لون الخط ومتل مانك شايف في كتيراوبشن جرب فيون

الكلاسات التانية هي كلاسات الخلفية .bg- بتعطي اي عنصر لون خلفية متل ابيض ازرق اسود …

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

المسافات

من القائمة ع يسار الموقع utilities > spacing
هون الكلاسات المساعدة لتضيف padding او margin
في كتير كلاسات هون لهليك لازم تعرف الية التسمية
m احتصار ل margin
p اختصار ل padding
m-0 بيعطيك 0 : margin
m-1 بيعطيك margin خفيف m-2 بيعطيك margin اكتر و هيك لحد m-5 بيعطيك اكتر قيمة margin و طبعا في m-auto بيعطيك margin : auto
نفس الشي ل padding عندك p-0 p-1 p-2 …. p-5 و p-auto

اذا يدك تحدد جهة معينة مثلا بدي padding ع اليمين بس مو ع كل الاتجاهات اسم الكلاس بصير الحرف التاني للجهة
l اختصار left
r اختصار right
t اختصار top
b اختصار button
x اختصار افقي يعني يسار يمين
y اختصار عمودي يعني فوق و تحت

بتصير الكلاسات ع الشكل ml-0 mt-4 px-auto …
مثلا بدي ضيف margin top لعنصر mt-1 بدي ضفلو padding يمين و يسار px-1

شغلة سهلة بس بدا تجريب و وقت

النصوص

من القائمة ع يسار الموقع utilities> texts
في تلت كلاسات اساسية بتتحكم بموقع النص ع اليمن ع اليسار او بالنص
.text-left .text-right .text-center

اكتر من هيك ما رح  اشرح في كتير لسا كلاسات مهمة لازم تشوفا و تقراها

بس قبل ما نخلص رح نجاوب او نحاول نحاوب ع سوال ممكن تكون عم تساله

طيب اذا عندي عنصر اخبار مثلا و الو كلاس news وبدي ضيف مسافة فوق العنصر ليش لاستعمل mt-5 بدل ما ضيف للكلاس
{margin-top : 1rem}.news ؟
صراحة السوال و كبير و كتير جدلي و في كتير مناقشات بالموضوع وصار القصة فلسفية اكتر
رأي بالقصة – وانا مبرمج و بفضل الكود النضيف – كل عنصر لازم يكون مستعمل اقل عدد كلاسات ممكن وما بحب استعمل الكلاسات المساعدة
لهيك انا بستعمل الموضوع متل ما قلت بالمقدمة لما بدي تصميم اولي او تصميم سريع بدون الدخول بالتفاصيل مشان جرب عليه كود مثلا وقتا الكلاسات المساعدة كتير مفيدة لانو فيك تضيفا تغيرا بسرعة
هلأ بس خلص وقرر انقل القالب لتصميم نهائي برحع بعملو refactoring  وبشيل اكتر قدر ممكن من الكلاسات الاضافية و بحطا ب كلاس css الاساسي
يعني بمثالنا رح بلش اني ضيف mt-1 وممكن قرر انو شيلو او عدلو ل mt-5 بسهولة و بس احسم الامر التصميم رح شيل الكلاس المساعد كلو وضيفو ل كلاس ال css
{margin-top : 1rem}.news

ملاحظة في استعمل تاني هو القوالب المباعة يعني لما تعمل قالب للزيون وبدك ياه يرجع يعدلو بسارع طريقة و تحديدا الالوان
مثلا بدك المستخدم يغير لون الخط بسرعة اذا حب فالكلاست المساعدة بتكون فكرة كويسة لانو المستخدم ما بحب يفتح ملف css ويشوف الف سطر و يعقد يدور فيها

المقال التاني

رح بنلش العناصر الكبيرة المتقدمة components متل ال navbar و forms …