Bootstrap | Abdelrahman Gamal

Abdelrahman Gamal

Abdelrahman Gamal

الهدف الأول و الأوحد من انشاء تلك القناة هو الارتقاء بالمجتمع العربي . مهم جداً عشان المجتمع يتقدم ان كل واحد يبدأ بنفسه و انا قررت أبدأ. بنفسي و اعمل كورسات مجانية لوجه الله لعل حد يستفاد .

تفاصيل الكورس

دروس الكورس

  1. 1 | 1 bootstrap 2021 tutorial كورس بوتستراب بالعربي 00:01:47
  2. 2 | 2 bootstrap tutorial تهيئة العمل بالكامل للبوتستراب تحميل البوتستراب و الجيكويري و البوبر 00:07:20
  3. 3 | 3 bootstrap tutorial نظام grid system in bootstrap 00:08:46
  4. 4 | 4 bootstrap tutorial الصفوف و الاعمدة على مقاسات الشاشة المختلفة 00:07:05
  5. 5 | 5 bootstrap tutorial justify content and align items in grid system 00:07:44
  6. 6 | 6 bootstrap tutorial color in bootstrap learn text color and bg color 00:03:38
  7. 7 | 7 bootstrap tutorial create alert in bootstrap 00:02:45
  8. 8 | 8 bootstrap tutorial create button in bootstrap btn 00:03:14
  9. 9 | 9 bootstrap tutorial create btn group and btn toolbar in bootstrap 00:05:10
  10. 10 | 10 bootstrap tutorial تطبيق عملي مهمة على كل اللي فات 00:09:41
  11. 11 | 11 bootstrap tutorial create cards 00:06:39
  12. 12 | 12 bootstrap tutorial create badges 00:03:09
  13. 13 | 13 bootstrap tutorial create slide in bootstrap 00:08:07
  14. 14 | 14 bootstrap 4 tutorial create slide 2 in bootstrap 00:03:58
  15. 15 | 15 - bootstrap tutorial dropdown 00:05:31
  16. 16 | 16 - bootstrap tutorial breadcrumb 00:03:28
  17. 17 | 17 - bootstrap tutorial collapse 00:03:30
  18. 18 | 18 - bootstrap tutorial form in bootstrap 00:12:41
  19. 19 | 19 - bootstrap tutorial input group 00:04:24
  20. 20 | 20 - bootstrap tutorial jumbotron 00:02:47
  21. 21 | 21 - bootstrap tutorial create navbar part 1 00:03:20
  22. 22 | 22 - bootstrap tutorial create navbar part 2 00:11:37
  23. 23 | 23 - bootstrap tutorial create progress bar 00:03:42
  24. 24 | 24 - bootstrap tutorial model 00:05:30
  25. 25 | 25 - bootstrap tutorial pagination 00:02:23
  26. 26 | بناء موقع كامل بالبوتستراب 4 تعلم كيفية تصميم واجهة موقع الكتروني بالبوتستراب 00:32:02
    تقييمات الطلاب

    ( 5 من 5 )

    ٣ تقييم
    5 نجوم
    66.67%
    4 نجوم
    33.33%
    3 نجوم
    0%
    نجمتين
    0%
    نجمة
    0%
    E
    Esraa Ali

    08-07-2024
    Y
    Youtube

    02-07-2024
    م
    مينا رمسيس

    25-07-2024
    كورس بوتستراب كامل للمبتدئين bootstrap 2021 tutorial for beginners

    ما هي بوتستراب Bootstrap؟
    بوتستراب Bootstrap هي إحدى أشهر المكتبات التي يستخدمها مبرمجو المواقع الإلكترونية على الإطلاق، حيث أن تطوير المواقع بشكله الحديث لم يعد يحتاج لإعادة كتابة كل حركةٍ وكل عنصرٍ من صفحات الموقع، وأصبح تنظيم الصفحة أمرًا بسيطًا بمساعدة بعض المكتبات الخارجية الشهيرة وعلى رأسها Bootstrap.
    لعلك سمعت كثيرًا عن اطار العمل الشهير Bootstrap الذى يستخدمه الكثير من مصممى واجهة المستخدم فى الويب فى هذه الايام سنتعرف اليوم على البوتستراب وكيفية عمله ومثال عليه.
    كيف يعمل البوتسراب ؟
    نقوم بأعطاء كلس معين وهذا الكلاس معرف فى ملفات البوتسراب لعمل وظيفة معينة

    مثال بسيط على ذلك
    ما هي بوتستراب Bootstrap
    هي إحدى أشهر وأقوى المكتبات التي تجمع HTML وCSS وJS لبناء صفحات ومواقع وتطبيقات الويب، وهي تفيد بشكلٍ أساسيٍّ في بناء مواقعٍ متناسقةٍ مع مختلف أحجام وقياسات الشاشات، بما في ذلك شاشات الهواتف الخلوية والأجهزة اللوحية، وهي مكتبةٌ مجانيةٌ ومفتوحة المصدر تتوفر للجميع على موقع Github وتم بناؤها من قبل شركة Twitter ولها.1
    ميزات بوتستراب Bootstrap
    انتشرت مكتبة بوتستراب Bootstrap بشكلٍ كبيرٍ منذ إطلاقها عام 2011 بشكلٍ مجانيٍّ، وأحبها المبرمجون حول العالم ولم يكن ذلك بمحض الصدفة بل وراء نجاح هذه المكتبة الكثير من الميزات الهامة ومنها:
    المرونة الكبيرة والسهولة في الاستخدام.
    التصميم المتوافق مع جميع الأجهزة.
    تتوافق مع كافة المتصفحات.
    تقدم تصميم ثابت وقابل لإعادة الاستخدام.
    يمكن تعلمها بشكل سهل وسريع.
    قابلية كبيرة للتوسع باستخدام لغة JavaScript.
    تحوي دعمًا مسبقًا للـ JQuery.
    دعم للـ API الخاصة بلغة Javascript.
    يمكن استخدامها ضمن أي محررٍ أو بيئةٍ برمجيةٍ.
    تتوافق مع أي تقنيةٍ أو لغة ضمن السيرفر مثل: ASP.NET – PHP – Ruby.2
    محتويات المكتبة
    تحوي مكتبة بوتستراب Bootstrap على مجموعةٍ من الملفات البرمجية الخاصة بالواجهات، من ملفات CSS وملفات JS وعناصر مختلفة ضمنها بالإضافة إلى بعض الخطوط والمواضيع التي تساعد على بناء موقعٍ متناسقٍ، حيث يقوم المبرمج بتضمين المكتبة في المشروع البرمجي الذي يعمل عليه ليستخدم كل تلك الملفات والميزات الموجودة فيها، ويمكن أيضًا نقلها إلى أي مكانٍ ضمن المشروع حسب الرغبة مع التأكيد على ضرورة وضع ملفات الخط في مجلد ملفات الـ CSS، وهنا الهيكل العام للمكتبة يحوي الملفات الأساسية فقط ومن الواضح أنه بسيطٌ ويشرح نفسه بنفسه
    ما الذي يجعل بوتستراب Bootstrap تلائم كل شيء
    بنيت مكتبة بوتستراب Bootstrap بطريقةٍ تجعلها تعمل بنفس الجودة في كل مكانٍ، ولعل أهم النقاط التي تجعلها بتلك القوة هي:
    الشبكة الخاصة بمكتبة بوتستراب والتي تقوم بعملية تقسيم الشاشة (مهما كان قياسها) ليتم توزيع العناصر فيها بسهولةٍ، وهذا يوفر الكثير من الوقت الذي يقضيه المبرمجون عادةً في بناء شبكتهم الخاصة أثناء بناء الموقع، وتتيح هنا عدة خياراتٍ للأعمدة التي يمكن أن تكون صغيرةً أو متوسطةً أو كبيرةً أو كبيرةً جدًا حسب حاجة الموقع.
    توفر مكتبة بوتستراب Bootstrap طرقًا مسبقةً لجعل الصور متوافقةً مع التصميم، عن طريق تحجيم الصورة بما يتلاءم مع حجم الشاشة، وذلك فقط بإضافة الكلاس img-responsive إلى الصور الموجودة في الموقع وستتولى المكتبة باقي المهمة، كما يمكن تغيير شكل الصورة عن طريق كلاساتٍ أخرى مثل img-circle و img-rounded.
    تحتوي مكتبة بوتستراب عناصرَ معدة مسبقًا يمكنك ببساطةٍ استخدامها في موقعك الإلكتروني، وهي عناصرٌ هامةٌ كانت تشكل عبئًا كبيرًا على المبرمجين في السابق مثل:Navigation bars – Dropdowns – Progress bars – Thumbnails وغيرها من العناصر التي لا يمكن الاستغناء عنها والتي ستجعلك تبني تصميمًا رائعًا دون الخوف من ظهوره في مختلف قياسات الشاشات.
    بالإضافة لكل التوابع الموجودة في بوتستراب فإنها تحوي الكثير والكثير من الإضافات الخاصة بالـ jQuery والتي تحوي القوة والسهولة والمزيد من المرونة في صفحات الموقع، حيث تقدم حلولًا سريعةً وقويةً لكل ما يتعلق بالصور و التنقلات و الـ modals، وعدة إضافاتٍ أخرى.
    توثيق المكتبة ضمن موقعها الرسمي هو أحد أكثر الميزات المذهلة لها، حيث يمكن معرفة كل شيءٍ عنها بالتفصيل وكل ما يخص طريقة الاستخدام والعناصر الموجودة فيها، إذ يتوفر شرحٌ تفصيليٌّ لكل جزءٍ منها، بالإضافة لوجود أمثلةٍ خاصةٍ لكل جزءٍ وهو ما يهتم به المبتدئين في استخدام هذه المكتبة حيث يمكن نسخ ولصق كود أي عنصرٍ فيها ببساطةٍ.
    يمكن لمستخدمي هذه المكتبة تخصيص الميزات التي يودون استخدامها حيث أن المكتبة كبيرةُ الحجم نسبيًا ويعد هذا التخصيص أمرًا هامًا في التطبيقات الكبيرة.
    لدى مكتبة جمهور كبير من المبرمجين والذي يجعلها أكثر سهولةٍ حيث يجد المبتدئ كل ما يسأل عنه متوفرًا بسهولةٍ ولها أيضًا صفحة خاصة على تويتر ومدونة.
    ومع تزايد انتشارها بدأ المطورون في إنشاء قوالبٍ جاهزةٍ بالاعتماد عليها لتسريع عمليات التطوير ويوجد مواقعٌ متخصصةٌ في شراء وتبادل القوالب
    كما تلاحظ، لدينا btn و btn-success و btn-lg كلها ستصنع لنا زر كبير وأخضر، رأيت كم الأمر بسيط وسهل وسريع، ولا يحتاج كتابة أي كود ويوجد الكثير من الكلسات الخاصة بالازار والفورمات والنصوص والصور والتعامل مع اي عنصر تقريبًا css
    والحصول على تلك الاكود من الموقع الرسمى هنا

    والان الى النقطة الاهم فى اطار العمل
    وهى Boostrap Grid System
    نظام يقوم ببناء الموقع على هيئة صفوف واعمدة وهذا لجعل الموقع متجاوب ويمكنه العمل على جميع مقاسات الشاشات

    فمثلًا تقسيمة الموقع فى الصورة هى للشاشات الكبيرة اما فى حالة التابلت او الموبيل فالشكل سيختلف
    حتى تمكن قارئ المدونة من تصفح المدونة بشكل اسهل فيكون على الشكل
    قواعد البوتستراب
    يجب ان يكون كلاسات row داخل .container للعرض الثابت للصفحة او .container-fluid للعرض الكامل
    يستخدم row لعمل مجموعة افقة من الاعمدة
    المحتوي يفضل ان يوضع داخل الاعمدة فقط