Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap3 دورة باللغة العربية

10,418 views

Published on

دورة bootstrap باللغة العربية
تقوم هذه الدورة على المرور على معظم الروابط في الموقع الأصلي
لل bootstrap وشرحها ووضع العديد من الأمثلة والأمور التي وردت بالإضافة الى العديد من التفاصيل المهمة ...

يمكنك تحميل الدورة كاملة مع الأمثلة من
2nees.com

Published in: Education

Bootstrap3 دورة باللغة العربية

  1. 1. تصميم: أنيس حكمت أبوحميد. ينورتكللإا ديربلا: nees.com2aneeshikmat@, aneeshikmat@gmail.com ينورتكللإا عقوملا :nees.com2www. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  2. 2. بسم لله الرحمن الرحيم.. بسم لله المعطي المعين.. بسم لله الذي تبارك به الكون .. بسم لله الذي أشرق له عالمنا, بسم لله الرحمن الرحيم ﻣﺩﺣہ ل حمدا كما ينبغي لوجهه وعظيم سلطانه .. ﻣﺩﺣہ ل رب العالمين. ﻠ ﻠ إخواني, بفضل من لله تعالى, نعود لكم اليوم, بدورة جديدة, بعنوان هذه الدورة المهمة جدا, والتي أصبح لا غنا عنها في ,boostrap3 framework عالم الويب, وخصوصا بعد تربعها على عرش أفضل 10 ..تاريخ البدء بكتابة هذه /12/ الآن .. وهذا حتى تاريخ 2014 الدورة المتواضعة .. سائلين المولى عز وجل .. أن يوفقنا وإياكم الى خير العمل ..ﻣﻟﺩﺣہ ل رب العالمين..بسم لله نبدأ.. ﻠ أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  3. 3. (1 Html (2 Css Js (3 مفاهيم عامة ستحتاجها في الجزء الثالث من الدورة .. jQuery (4 ..وبإمكانك تعلم هذه الدورة بسهولة ... وخصوصا كيفية التعريف وال click وبعض الأوامر مثل ال ..jQuery والبدء باستخدام ال الخ .. on أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  4. 4. هذه المتطلبات التي يتجب أن تعرفها قبل البدء بالدورة.. لأن الشرح بشكل framework سيعتمد عليها .. علما أن العمل على هذا ال لكن الآن يكتفي .. LESS أو SASS أكثر احترافية يتم من خلال ال ومن ثم استخدم .. css اعتمادا على ال bootstrap بأن تتعلم ال ... css ل compilation لعمل SASS ال اذا كنت لا تعرف عن أحد المتطلبات السابقة ..فيمكنك تحميلها مجانا من 2nees.com/courses خلال أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  5. 5. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  6. 6. صمم بواسطة framework هو bootstrap ال من شركة تويتر, يعد هذا ال Jacob Thornton و Mark Otto الأول والأكثر انتشارا الآن عبر عالم الويب, حيث وضع في framework ك GitHup عام 2011 على ال وخلال 3 أعوام تقريبا وفي عام 2014 أصبح هو open source المشروع الأول عليه .. يمثل مجموعة كبيرة ومجانية من الأدوات والخيارات framework هذا ال لتطوير وتصميم المواقع الالكترونية بشكل سهل, سريع, ومتوافق مع المتصفحات, والهواتف المحمولة ..وهو صمم خصيصا على مبدأ أسرع مشروع وأسهل framework ويعد هذا ال ..mobile first لتصميم المواقع... framework مشروع في عالم ال أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  7. 7. فإننا نقصد Framework .. وعندما نقول الآن وهذا أمر مهم ..ويقصد بال .. Front-end framework هو الجزء المسؤول عن تصميم وتنسيق الصفحات front-end الالكترونية, وما يتعلق بالأمور التفاعلية مع المستخدمين .. يحتوي على تصاميم bootstrap بالإضافة الى ما ذكرنا فان ال الرئيسية مثل ال html, css وتنسيقات جاهزة لمجموعة ال الخ من المكونات التي يمكن ...text, forms, buttons اضافتها والتحكم بتنسيقها. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  8. 8. مبني على framework أصبح هذا ال bootstrap 1) من ال 3 وهذا يعني أن هناك مكتبات كاملة صممت لجعل .. mobile-first وبشكل افتراضي يتم تضمينها ... mobile موقعك متوافقا مع ال يدعم جميع المتصفحات الرئيسية, وبهذا تتخلص bootstrap 2) ال 3 من مشكلة التوافقية بين المتصفحات .. (هناك بعض الاستثنائات أو الاضافات التي تضاف للمتصفحات القديمة ..أو حالات شاذة حسب طبيعة الأمر والمتصفح.. لكن في المجمل والأمور الرئيسية ..فجميعها توافقية ^_^). وهذا أمر رائع html, css, js 3) سهلة التعلم, وتعتمد على ال يعد موقع رائع لفهم بيئة bootstrap ..أيضا الموقع الخاص بال .bootstrap العمل هذه .. وهو المرجع الرئيسي لنا ^_* في ال أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  9. 9. (4Responsive Web Design : صاخلا عقوملا نأ ينعي اذهو كب .. ةفلتخملا تاشاشلا ىلع رهظيس .. لا لثمtablet, mobile,normal screen _^.* لدعم ال bootstrap من المميزات التي يقدمها ال  هي أنه يوجد طريقة العمل ..لذلك تجد أنه من responsive السهل التعديل أو التطوير أو فهم عمل الآخرين ^_*. مفتوح المصدر ..ويقدم أدوات كثيرة تساعدك  على العمل وتطوير الموقع وفحص و .. responsive تخصيص ال أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  10. 10. أو يمكن تضمينه يندرج تحت هذه bootstrap إن ما يحتويه ال التصنيفات: ويقصد بها كل ما يقوم عليه التصميم من بنية :Scaffolding (1 تركيبة ..واذا حاولت ترجمة هذا المصطلح ترجمة حرفية فستكون الترجمة هي سقالة .. أي وهي المكونات والرفعة الموجودة لبناء أي مبنى .. وهنا في عالم الويب ..تعني مجموعة المواد التي تبني هيكلية grid system, التصميم أو الصفحة .. وتحتوي على ال responsive design, contains layout, Fluid Grid وهو مجموعة الكلاس التي نستخدمها للتحكم بتنسيق :Base Css (2 الخ .. btn العناصر مثل الجداول, والصور, وال أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  11. 11. وتحتوي هذه على أي مجموعة عناصر قابلة :components (3 navbar, للإستخدام والتفاعل مع المستخدمين مثل ال الخ. .. dropdowns هناك العديد من مكاتب الجافا سكربت التي يمكن أن :Js plugIn (4 تضمنها دفعة واحدة.. أو واحدة ..واحدة .. بإمكانك أنت أن تقوم بعمل مكون خاص بك . :Customize (5 أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  12. 12. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  13. 13. سهلة جدا .. وعملية استخدامه bootstrap إن عملية تنصيب ال الخاصة به ..أمر سهل أيضا .. basic page وانشاء ال قم بالدخول الى هذا الرابط (هذا الرابط يحتوي bootstrap لتحميل ال وفي دورتنا هذه أحدث bootstrap على أحدث نسخة من ال .(bootstrap نسخة هي 3 طبارلا :started/ http://getbootstrap.com/getting- أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  14. 14. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  15. 15. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  16. 16. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية 
  17. 17. ملاحظة: بدون تحميله وذلك عن طريق استخدام bootstrap يمكنك استخدام ال .. CDN ال هي اختصار ل CDN فال :CDN اذا كنت لا تعرف عن ال ومن خلالها يمكنك تحميل .. Content Delivery Network الملفات عن طريق هذا السيرفر بدلا من أن تكون متواجد على سيرفرك أنت .. وفائدتها اذا قمت بزيارة موقع يوجد به على جهازك ..وهذا cashe فسيقوم بانشاء ملفات bootstrap يسرع عملية التحميل للصفحات .. ويقلل من عملية طلب الملفات من السيرفر الخاص بك لكل مستخدم ... أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  18. 18. جاهزة لدينا لبدء العمل bootstrap والآن .. أصبحت ملفات ال ..وسأقوم هنا باستخدام النسخة التي قمنا بتحميلها لتنفيذ الأمثلة .. داخل ال index تكون هي ال html ماذا بعد؟ سأقوم بانشاء صفحة الذي قمنا بتحميله ..والذي سيمثل ملف folder الخاص بال root المشروع للموقع الخاص بي .. الذي سنقوم بوضعه داخل ال basic template والآن ..لنشاهد ال والذي ستجده بنفس صفحة التحميل ..الخاصة بال .. index.html ... Bootstrap أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  19. 19. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  20. 20. السابق: template شرح ال في أول الصفحة مباشرة <!doctype html> 1) لقد قمنا بتعريف على أن نوع الملف html وال css ..وهو أمر الزامي لتتعامل ال .. html الذي سنعمل عليه سيكون 5 و *_^ mobile-first عبارة عن bootstrap 2) لقد قلنا أن ال قلنا أن التضمين يتم بشكل تلقائي ..لكن لزيادة الثقة أو التأكيد على .. meta tag العمل ..نقوم بإضافة هذه ال أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  21. 21. داخل ال zooming تخبرنا أننا سنسمح بعمل meta tag هذه ال وعملية استدعاء طبيعية .. أيضا يمكنني عمل mobile للشكل الأصلي أو الإفتراضي الذي قمنا بوضعه ..مثل override وذلك عن طريق ال zoom الرغبة في منع المستخدم من عمل شاهد المثال: ... user-scalable=no هذه meta tag 3) أما ال القديمة IE لا يدعم متصفحات ال bootstrap فهي تستخدم لأن ال أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  22. 22. فهذا يمكنني ie لا يدعم المتصفحات القديمة لل bootstrap وبما أن ال من أن أضع شرطا لطريقة العرض للمتصفحات القديمة .. ان السكربت الذي سيتم استدعائه هو .. hack condition 4) ال ...Respond.js أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  23. 23. ..bootstrap وال jQuery 5) وأخيرا ..وهو تضمين ملفات ال والآن .. لنقم بتنفيذ الصفحة ... ^_*.. شاهد الشريحة التالية: ولاحظ ..كيف أنك بكل سهولة ..وكأنك تتعامل مع الشكل سهل ^_* .. bootstrap قمت باستخدام .. html الإعتيادي لل أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  24. 24. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية شاهد المثال– هذا الشكل يمثل زر لمشاهدة الأمثلة في كل شريحة تراها ..
  25. 25. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  26. 26. أنه لتنظيم العمل .. css والآن ... نحن نعلم ..وكما تعلمنا بدورة ال ..والحفاظ عليه ..ورغبة في تحقيق التوافقية وتجنبا للإخطاء ..فإننا wrapper هذا ال .. wrapper نضع المحتوى جميعه ..داخل container-fluid أو container هو bootstrap في ال 2 ..ويكتبان على الشكل التالي: classes هذان هما أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية أو
  27. 27. في المثال سابق.. ستلاحظ كيف أن ال fixed-.. ولكن بعرض ثابت responsive هو .. Container ويكون في .. px فعلى سبيل المثال تجد أنه 1170 .. width وهذا ما تعلمناه margin:0 auto; منتصف الشاشة ..بسبب ال *_^ ...css بال فيكون العرض الخاص بها ..عرض container-fluid أما ال على الأطراف .. وهذا يفسر padding الشاشة ..مع وجود مسافة المسافة الموجودة في المثال السابق لهذا الحاوي ... ^_^ أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  28. 28. container-fluid وال container والآن .. بعد تعرفنا على ال هذا ..Grid System فإننا سنتطرق الى موضوع مهم جدا .. وهو ال الموضوع مهم جدا..في تصميم وتنسيق الصفحات الإلكترونية .. للمصممين والمطورين .. اضافة الى أهميته في العمل على ال بشكل كبير .. ^_* bootstrap ومن ثم الإنتقال الى Grid system والآن سأبدأ بتعريف ال .. Bootstrap grid system هو نظام/ بنية تركيبية ابتكرت/ أوجدت في عالم :Grid system ال الويب لتنظيم المحتوى ضمن خطوط متقاطعة عاموديا و أفقيا وعادة ما يكون هذا النظام ثنائي البعد .. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  29. 29. لا ىلع لمعلل ةعونتم لمع تائيبك ةمظنأ ةدع دوجوب حمسي ملاكلا اذهوgrid system لا اهرهشأ نوكي دقGrid system 960 بشكل أكبر ..شاهد الصورة Grid system ولتتضح فكرة ال ..وستفسر كل ما قلناه لوحدها ^_* شاهد الصورة في الشريحة التالية ..والتي تليها أيضا .. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  30. 30. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  31. 31. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  32. 32. هل لاحظت الصورتين السابقتين ..وأمعنت النظر؟ قام بتقسيم الصفحة على شكل أعمدة grid system نعم .. فال وصفوف .. الصفوف هذه ستحتوي محتوى معين ..هذا المحتوى ال الخاص به سيكون بنائا على عدد الأعمدة ..فتلاحظ .. أنه width كانت مثلا 8 أعمدة + 4 أعمدة ..(على فرض block تقسيمة ال أننا اعتمدنا نظام ال 12 عامود في الصفحة) ثم تجد أسفل منه 6أعمدة + 6 أعمدة = 12 عامود ..وهكذا .... طريقة لضبط المحتوى بنائا على .. grid system هذه هي فكرة ال الأعمدة ..(تقاطع الخطوط عاموديا وأفقيا) .. *) ملاحظة: يجب أن يكون التصميم مصمم على هذا النظام أصلا ..^_* أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  33. 33. بوجود Grid هو نظام ال .. bootstrap Grid System والآن ال 12 مع امكانية التغيير colmn ويحتوي على bootstrap ال وهو .. bootstrap على عدد الأعمدة وخصائصها باستخدام ال فلا يعني .. mobile first ومبني على أساس responsive وإنما قد يحتاج ذلك الى responsive وحده أنه grid استخدام ال فيكون bootstrap تخصيص العمل ..لكن باستخدام ال بشكل تلقائي .. ^_* responsive *_^ bootstrap Grid system والآن لنرى كيف يعمل ال الى الشريحة التالية: (سيتم توضيح النقاط بالأمثلة بعد ذكرها بإذن لله تعالى ^_*) أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  34. 34. أو container داخل grid 1) يجب أن يوضع ال ويوضع بداخلها الصفوف وبداخل الصفوف container-fluid فهذا يعني container-fluid الأعمدة.. اذا قمنا باستخدام ال فهذا يعني container واذا قمنا باستخدام full-width .. grid لل fixed-width 2) نستخدم الصفوف لإنشاء مجموعات أفقية كل مجموعة تحجز مساحة معينة من عدد الأعمدة ..^_* 3) يجب أن يكون المحتوى جميعه داخل أعمدة .. ويمكن اضافة صفوف داخل هذه الأعمدة .. فيصبح الشكل صف – عامود – صف – عامود بشكل سريع . grid لإنشاء .col-xs- و 4 .row 4) يمكنك استخدام أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  35. 35. grid 5) يمكنك عمل فراغات / ازاحة بين الأعمدة الموجودة داخل ال وهذه الإزاحة يمكنك تحديدها بشكل يدوي.. هذه الإزاحة تقابل ب بالسالب لأول وآخر للصف.. margin هو bootstrap 6) إن عدد الاعمدة الإفتراضي الذي نتعامل معه بال يجب أن يكون المحتوى grid 12 عامود .. لذلك عند تقسيمك لل مقسما الى مجموعات ..لو افترضنا الى 3 مجموعات ..فهذا يعني أننا ..col-xs- سنجعل لكل مجمعة أربعة أعمدة وذلك عن طريق 4 7) اذا زاد عدد أو مساحة المجموعات عن ال 12 عامود ..فإن هذا يعني انشاء عامود العامود على سطر جديد ..كوحدة متكاملة لوحدها ^_* وبهذا يمكنك تحديد كيف .. mobile 8) قلنا أن هذا النظام يدعم ال بنائا على حجم الشاشة باستخدام ال grid يمكن أن تتعامل مع ال الخ ....col-lg- أو .col-md- مثل css class أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  36. 36. وهي bootstrap grid 9) اختصارات مهمة في حين التعامل مع ال وهي تعني أن Extra small devices وهي اختصار ل :xs على جميع أحجام الشاشات التي تكون أصغر من grid يعمل ال 768 .. وهذا لا يعني أنها لن تعمل على الشاشات ذات px الحجم الحجم الكبيرة ..بل على العكس ..ستعمل بالشكل المطلوب .. ولكن ما عندما grid لل responsive أقصده أنه سيبدأ العمل بنظام ال *_^.. يصبح حجم الشاشة أقل من 768 xs وبنفس مفهوم ال Small devices وهي اختصار ل :sm *_^..768px لكن هذه لحجم شاشة أكبر أو يساوي أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  37. 37. xs ونفس مفهوم ال Medium devices وهي اختصار ل :md .^_^ 992px لكن هذه لشاشة أكبر أو يساوي لكن هذه xs وبنفس مفهوم ال Large devices وهي اختصار ل :lg .. 1200px تعمل لأحجام الشاشة الأكبر أو يساوي ال responsive فسيعمل ال xs وكل واحدة تعني ..أنني اذا استخدمت ال على جميع أحجام الشاشات التي تقل عن 768 ..غير هيك grid اذا responsive فسيعمل ال sm ..ستعمل باشكل الطبيعي ..أما كان حجم الشاشة أكبر أو يساوي 768 .. وفي حال أن حجم الشاشة أقل... فيصبح العامود ..بحجم العرض كامل .. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  38. 38. والآن ..لنشاهد أمثلة على ما تم ذكره من نقاط ^_* .. وخصوصا آخر نقطة ..لنسير من آخر نقطة بشكل عكسي ^_^ ..لاحظ المثال: أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  39. 39. هل قمت باستعراض المثال السابق؟ أريدك الآن أن تقوم بتصغير حجم المتصفح .. وانظر التغييرات التي ستطرأ .. وأريدك أيضا أن تنظر الى الشيفرة البرمجية .. بعد ذلك سأقوم ان شاء لله بتفصيل كل حالة ..وشرح مبسط للشيفرة البرمجة ..بما أنه أول مثال جميل *_^ أرجوا أن تدقق الآن على المثال ..نتائجه ..والشيفرة البرمجية ..ثم الانتقال الى الشريحة التالية ..وهذا لمصلحتك ^_* ملاحظة: الامثلة لأنها طويلة تم قطع الصورة لإجزاء حتى يسهل وضعها بالشرائح ..^______^..(الصور جميعها طولية..من أعلى لإسفل) أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  40. 40. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  41. 41. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  42. 42. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  43. 43. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية 1200px أكبر أو يساوي
  44. 44. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  45. 45. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن .لو تتبعنا ناتج الجزء الأول لوحده ..لوجدناه بالشكل التالي: bootstrap اذا فهمت ..هذه الفكرة ..فأنت أنهيت جزئية مهمة في ال ..والباقي أسهل من هذا ان شاء لله ^_*.. والآن .أريدك أن تحاول أن تنشئ بالشكل التالي : grid الصف الأول: فيه 12 عامود ..الصف الثاني: فيه 2 عامودان... الثالث: فيه 4 *_^ لا تنسى أن مجموع أطوال الأعمدة يجب أن يساوي 12
  46. 46. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  47. 47. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية الآن.. هل خطر ببالك سؤال على الأمثلة السابقة ؟ هل خطر ببالك كيف بنائا على حجم الشاشة..؟ يعني اذا كانت أكبر grid يمكنني تقسيم ال من 1200 خليها 12 عامود ..اذا كانت أكبر أو يساوي 768 خليها 4 ؟... واذا أقل من هيك خليها 2 هذا الأمر سهل جدا ^_^.. كل ما عليك القيام bootstrap باستخدام ال التي ذكرناها معا ..مثل class به ..هو وضع ال ^_^ col-xs-2 col-md-4 col-lg-1 لنشاهد مثالا عمليا ^_^
  48. 48. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  49. 49. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية شاهد النتائج عن تطبيق المثال .وتصغير وتكبير حجم المتصفح ^_*
  50. 50. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية هذا الموضوع رغم بساطته .. الى أنه رائع جدا ..ومفيد جدا .. والآن ..شاهد المثال ^_* والآن ..أرجوا أن تهتم بالنظر وتجربة النتائج بيدك .. أيضا انظر الى الشيفرة البرمجية ..بانتباه ..بعذ ذلك ..أريدك أن تحل هذا السؤال: .. lg يحتوي على 6 أعمدة اذا أكان حجم الشاشة grid قم بانشاء ويحتوي على 2 من الأعمدة اذا كان md ويحتوي على 4 اذا كان .*_^ sm
  51. 51. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية مثال على الإزاحة بين الأعمدة ^_*.. قلنا بالنقاط أنه يمكننا أن نحدد مقدار الإزاحة (اذا اردنا ذلك) للأعمدة ويكون ذلك عن طريق استخدام ال .. grid الموجودة داخل ال ال * ترمز الى عدد الأعمدة التي ستمثل .. col-md-offset-* مقدار الإزاحة .. وهي تشبه تماما فكرة تعريف عامود ..أو حجز مساحة فهذا يعني احجز ازاحة col-md-offset- عامود.. فلو وضعنا 4 ترمز الى حجم الشاشة أكبر أو md بمقدار 4 أعمدة ..^_^.. وال *_^ ... يساوي 992 والآن ..لنشاهد مثالا ^_^
  52. 52. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية هل لاحظت.. إن معاملة الإزاحة فعليا ..هي معاملة انشاء فراغات بمقدار عدد معين من الأعمدة ..لهذا أمكنني أيضا التحكم بوجود الإزاحة من عدمه حسب حجم الشاشة
  53. 53. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية لاحظ كيف تختفي الإزاحة وتظهر..ولاحظ كيف أنها تحسب من اليسار .. ولاحظ اختلاف الإزاحة باختلاف حجم الشاشة ..
  54. 54. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية الآن ..نقطة أخرى مهمة ..وهي اختلاف الأطوال بين الأعمدة ..؟ هل لاحظت أنك حين تقوم بتصغير الشاشة في بعض الأحيان ..تجد أن عامود أصبح أطول من الآخر ..وهذا يجعل من العواميد التي تأتي بعده ترتب بجانبه .. لاحظ الصورة .. under اذا لاحظت .. فإنه من المفروض أن تأتي أي حقل فيه كلمة أسفل بالشكل التالي ..
  55. 55. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية ** طبعا هذا الأمر يحدده التصميم .قد تريد ابقائه بالشكل الذي يظهر عليه ..وهذه حريتك أو بنائا على رغبة الزبون ..المصمم ..الخ ^_* class يحتوي على هذه ال div للقيام بمثل هذه الحركة يلزمنا اضافة .. visible-xs-block - clearfix وهي هذا الكلاس يقوم على اجبار المحتوى بأن تأتي بعد :clearfix ال ..css بال clear:both الحاوي الذي قبله ..وهي تشبه عمل هو كلاس يستخدم لإظهار عنصر معين :visible-xs-block ال بنائا على حجم الشاشة ..وهذا يعني أن يمكنني التحكم متى تظهر ال بنائا على ال حجم الشاشة ... clear fix
  56. 56. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية أرجو أن تنتبه جيدا لهذا المثال المهم ...وقم بتصغير الشاشة لترى النتائج في جميع الأحجام وقارنها مع ال .. under وأهم ما تركز عليه هو موقع الأعمدة التي تحتوي كلمة .. md حاول أن تغيير بالشفرة البرمجية... .. xs الى md قم بتجربة تغيير ال
  57. 57. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  58. 58. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية أيضا من الأمور المهمة التي تكلمنا عنها بالنقاط ..هي امكانية وجود التسلسل الآتي وهو صف عامود صف عامود .. .. Nesting Column أي بمعنى آخر وجود
  59. 59. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية اذا لاحظت من الشيفرة البرمجية السابقة .. أن أي عامود ننشئه ..ونريد التعامل معه .. فإنه يقسم الى 12 عامود .. (طبعا هذا الكلام لأننا بالأصل نتعامل مع 12 عامود .. ) ولذلك ..فإنه اذا قمت بحجز عامود بطول 8 .. فهذا يعني أن المساحة هذه تحتوي أيضا 12 عامود .. .. ولتبسيط الأمر .. لو فرضنا أن العرض الكلي 1170 أخذنا منها مساحة 8 أعمدة ..فهذا يعني أن المساحة الخاصة بهذا الحقل 780 .. الآن .اذا قمنا باضافة عامودين (8 * 1170/ ستصبح ( 12 جديدين واحد بطول 4 والآخر بطول 8 داخل الحقل الذي حسبنا حجمه 780 ..سيقسم الى 12 عامود حسبما ذكرنا وبهذا يصبح حجم ال 4 260 .... وهكذا = 4 * 780/ الموجودة هي 12
  60. 60. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية ولتتصح الفكرة أكثر ..لنشاهد مثالا عمليا معا .. .. level أرجوا أن تنتبه للنتائج جيدا .. وخصوصا اختلاف ال يقصد أنهما بنفس الصف .. Level 1 يقصد به أنهما عامودان داخل صف موجود داخل عامود .. Level 2 .. Nesting Column منهم ..وانظر الشيفرة البرمجية وتتبعها grid شاهد المثال: وانتبه لكل لأنه سهل جدا.. اطلع وقارن .. grid ..وقارن بعد اطلاعك على أول بين الثاني والثالث ..وشاهد كيف أن استخدام الكلاس التي ذركناها يمكن أن تغير بالشكل وتسهل العمل علينا ..وتعطي منظرا رائع ^_^
  61. 61. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن ..ماذا ^_^..نأتي على أمر راااااااااائع ^_* ..وهو التحكم بترتيب فقد responsive خصوصا في حالات ال .. grid الأعمدة داخل ال تحتاج الى تبديل موقع عامودين في حال كانت الشاشة صغيرة ..أو لإظهار المحتوى مرتبا بشكل يختلف عن شاشات الأحجام الصغيرة .. 2 وهما: class ويتم ذلك عن طريق وتقوم هذه الخاصية على دفع العامود :.col-md-push-* (1 بمقدار معين باتجاه اليمين... وتقوم هذه الخاصية على سحب العامود :.col-md-pull-* (2 بمقدار معين من الأعمدة باتجاه اليسار... وكما ذكرنا بالخصائص السابقة ..فهذه تعمل بنائا على حجم الشاشة ومقدار الدفع والسحب يكون بنائا على عدد الأعمدة ..^_*
  62. 62. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن ..لنشاهد مثالا ..
  63. 63. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية هل قمت برؤية المثال؟..هل لاحظت كيف يختلف الترتيب عن تغيير حجم الشاشة ...؟ نعم كلما ..تقوم بتغغير حجم الشاشة ..سيقوم بتغغير الترتيب حسب push القياسيات التي قمت بوضعها أنت .. أيضا عملية الترتيب ..من فإنها ارتبطت بعدد الاعمدة كما لاحظت .. .. pull و والآن ..الى آخر شريحة في هذا الموضوع ..ولننتثل معا الى موضوع جديد بإذن لله تعالى ^_*
  64. 64. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية http://getbootstrap.com/css/ هذا الجدول يلخص ما ذكرناه ^_^
  65. 65. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  66. 66. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية ترمز الى ما يتم طباعته على الشاشة .. وال Typography طبعا ال يقوم بتعديل بعض الخصائص بشكل ليس كبير..لكنه bootstrap يحدث فرقا نوعا ما بالطباعة .. وأول ما سنبدأ به هو يتم تغيير شكل الطباعة .. h الى 6 h حميع ال 1 :heading 1) ال الخاصة بهم .. لاحظ الفرق بين الشكلين: (قم بتطبيق المثال لتشاهد عادي و html الفرق بنفسك على المتصفح – لا يوجد كود.. هذا (- bootstrap template
  67. 67. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية 14 وجميع ال px فحجم الخط الإفتراضي هو :body 2) بخصوص ال 10px يساوي margin-bottom التي تتواجد بداخله لها <p> كقيمة افتراضية .. لاحظ حجم الخط ..والمسافة بين الفقرات ..ودرجة اللون للخط..
  68. 68. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية و mark وهي العناصر مثل :Inline text elements (3 الخ ..abbr وال highlight الآن ..سأدعك تكمل قرائة بقية الأمثلة لوحدك .. لأن الموضوع أصبح واضحا ^_* تفضل وانظر الى هذا الرابط: اضغط هنا
  69. 69. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن ..لنبدأ فعليا بسرد وذكر خصائص بعض العناصر ومكونات ال ^_^ bootstrap وتنسيقها أو التعامل معها باستخدام ال html ^_^..table وأول عنصر هو ال يتم تنفيذه باستخدام bootstrap أولا ..الشكل الإفتراضي للجدول بال شاهد شكل الجدول: .. *_^ .. class=“table”
  70. 70. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية لإظهار الجدول على شكل bootstrap كما يمكنك أيضا استخدام ال Striped تخطيط (أقصد صفوف مختلفة الألوان..) وتسمى هذه بال الذي class table-striped ويتم تفعيل هذه الخاصية باستخدام ال هذه الخاصية ie- شاهد المثال: (لا تدعم ال 8 .. table يضاف الى (*_^ nth:child() بخاصية تسمى css لإنها تعتمد على 3
  71. 71. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية كما يمكنك اضافة اطار لجمع خلايا الجدول والجدول ..وذلك عن طريق ... class table-bordered استخدام ال شاهد المثال: (لا تنسى تطبيق كل مثال مباشرة ..)
  72. 72. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية يالإضافة الى الخصائص الجميلة والمريحة التي ذكرناها ..فهناك خاصية أي عندما يمر مؤشر الفأرة قوة ... row hover رائعة أيضا وهي صف من صفوف الجدول ..سيقوم بتغير لونه –يمكنك اضافة خيارات أخرى أيضا - ..^_* ..امر رائع ويتم ذلك عن طريق استخدام الكلاس شاهد المثال: .. table-hover
  73. 73. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية لتقليل ال class table- condensed أيضا يمكنك استخدام ال ال الموجود داخل الخلايا ..ونستخدم هذه الخاصية في حال padding صغير ..خصوصا اذا كان المحتوى padding أردنا أن يكون ال كبير .. خاصية اضافة لك اذا أحببت استخدامها يوما أو احتجتها ^_* شاهد المثال:
  74. 74. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية نستخدمها مع الجداول bootstrap أيضا هناك اضافة رائعة داخل ال تعطيني مجموعة class هذه ال ,Contextual classes وهي من الألوان المختلفة المخصصة لتنفيذ تنبيه معين .. هي: Contextual classes هذه ال
  75. 75. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن ..لنشاهد مثالا معا ^_^:
  76. 76. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية وهي ال ^_* table والآن ..الى آخر نقطة وأجمل نقطة تخص ال إن الجدول من مشاكله التي كنا ... *___^ Responsive table وهذا .. responsive داخل تصميم table ننزعج بحلها هي وجود الأمر كان يدعنى نتعمل مع الجدول بعدة طرق ..إما ببناء من divs يحول الجدول على شكل ).. responsive grid الصفوف والأعمدة ..) أو التحكم بالجدول والصفوف والأعمدة وتحويلها media واعطائها خصائص ..(اعتمادا على ال blocks الى الخ .. scroll وبنطلع .. customize أو نقوم بعمل .. ( query من الطرق.. لكن الآن .. ﻣﺩﺣہ ل ..بحركة واحدة ..يصبح الجدول ﻠ ويكون ذلك عن طريق استخدام الكلاس .. ..*_^ Responsive table-responsive
  77. 77. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية للجدول .. scroll هو اظهار class إن ما يقوم به هذا ال جديد): div شاهد المثال وطريقة التطبيق: (لاحظ أنني قمت باضافة
  78. 78. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  79. 79. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية وتنسيق الفورم وخصائصه من الأمور المهمة, Forms نحن نعلم أن ال والتي قد تأخذ من وقت لا بأس به من حيث التنسيق والترتيب ..لكن يمكنك اختصار كل ذلك ..بخصائص bootstrap باستخدام ال أو للفورم بشكل عام .. bootstrap للعناصر التي يمكنها استخدام ال له الخصائص bootstrap داخل ال Form بشكل عام فإن ال الإفتراضية التالي: تأخذ input, textarea, and select 1) جميع عناصر ال .. .form-control العرض 100 % .. اذا تم استخدام الكلاس div wrapper داخل html وعنصر ال label 2) يتم وضع ال .form-group. (حاوي يحتوي هذه الخصائص) ويحمل الكلاس
  80. 80. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية .*_^ <form> الى role="form” 3) قم بإضافة يقدم لك 3 نماذج مختلفة bootstrap فال layout أما بخصوص ال يمكنك تنسيق الفورم بها: Vertical (default) form (1 Inline form (2 Horizontal form (3 والآن ..لنشاهد مثالا ^_*
  81. 81. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية Vertical form (default)
  82. 82. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية Vertical form (default)
  83. 83. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية على form هو تصميم بحيث تكون عناصر ال .. form inline ال ويكون .. aligned left والإزاحة الخاصة بها لليسار inline شكل ..html الخاص بهذا الشكل ..مطبوعا بجانب عنصر ال label ال عن طريق اضافة الكلاس inline form ويتم تفعيل ال ...<form> الى ال form-inline *) ملاحظة: لا ينطبق هذا الشكل الا على حجم أكبر أو يساوي 768 ..(قم بتجربة ذلك على المتصفح بعد رؤية المثال في الشريحة px التالية ^_*)
  84. 84. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية Inline form code Inline form result
  85. 85. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية هذا الكلاس يقوم اخفاء ال .. .sr-only ملاحظة: يوجد كلاس اسمه خصوصا class ولكن لماذا نستخدم هذا ال .. form من ال label .. !؟ مع اتاحة قرائته label هذا الكلاس يقدم مزية رائعة وهي اخفاء ال وهذا الأمر إن لم .. Screen Reader .. برامج قرائة الشاشات قد يسبب مشكلة لهذه القارئات ^_* label يستخدم ولم تضع شاهد المثال في الشريحة التالية .. وانتبه لقم قمت بوضع الشيفرة البرمجية لكي تعرف ما هي الفكرة التي اتبعها لإخفاء .. sr class الخاصة بال *_^ label ال
  86. 86. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية .sr-only
  87. 87. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية وال inline بهذا الشكل يكون ما بين ال .. Horizontal From أخيرا ..ال form component بجانب ال label بحيث يظهر ال .. vertical على سطر لوحده.. ^_* group(wrapper) .. ويظهر كل يتم التعامل مع هذا الشكل عن طريق استخدام الكلاس *_^ <from> وتوضع داخل ال form-horizontal له .. control-label نقوم باضافة الكلاس .. label بالنسبة لل بالإضافة الى ما ذكرنا ..فهنا سنستخدم الأعمدة التي تعلمناها ^_* ويكون ذلك form جديد نضعه ليحتوي ال wrapper ول label لل .. component شاهد المثال ^_*
  88. 88. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية لا تنسى تطبيق / كتابة الأمثلة ... ^_^
  89. 89. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  90. 90. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية التي يدعمها أو يتعامل معها ال html والآن ..ما هي عناصر ال ؟form والتي تتواجد أو تستخدم داخل ال bootstrap يمكننا تقسيمها الى: (1 Input (2 textarea (3 checkbox (4 radio (5 Select (6 Others ^_* درسناها ونعرفها ^_^.. html tag هذه جميعها والآن ..لننظر معا الى الخصائص التي يمكننا العمل معها ...
  91. 91. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية input التي تستخدم ال html وهي جميع عناصر ال :Input (1 والتي تندرج بهذه القائمة: text, password, datetime, datetime-local , date, month, time, week, number, email, url, search, tel, and color . لوحدة مباشرة ..استخدم bootstrap والآن ..هذا النوع يتعامل معه ال ويكفي هذا .. .. form-control فقط الكلاس هو أمر الزامي input الخاص بال (type) لكن انتبه من أن تحديد النوع ^_* ... شاهد مثالا ^_^
  92. 92. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية لنقوم بعملية ادخال متعددة tag نقوم باستخدام هذا ال :textarea (2 الأسطر (أكثر من سطر واحد) .. أيضا يمكنك العمل على هذا النوع بكل سهولة ..فقط قم باستخدام الكلاس ويمكنك ايضا تحديد عدد السطور باستخدام ال .. form-control لاحظ المثال: .. rows
  93. 93. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية جميعنا نعرف أن ال :(checkbox & radio) 4 & 3 من الأمور الرائعة جدا في عالم البرمجة radio وال checkbox فهي مفيدة بعرض مجموعة من الخيارات يمكنه الإختيار من خلالها .. امكانية أختيار أكثر من خيار ..بينما ال checkbox بحيث يدعم ال لا يدعم الا خيار واحد .. radio لا checkbox وال radio والآن أريدك أن تعرف ..أننا مع ال .. form-control نستخدم ال خيارات يمكننا استخدامها: 1) يمكننا استخدام كلاس اسمه هذا الكلاس يجعل ال . radio-inline أو checkbox-inline تأتي على نفس السطر . radio أو box
  94. 94. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية أو حاوي مثل wrapper داخل radio أو ال box 2) نقوم بوضع ال .. label أو div ال كلاس ..داخل ال الحاوي الذي ذكرناه disabled 3) يمكننا استخدام ال بالنقطة رقم 2 .. وهذا الاستخدام يعطي تصميم مباشرة من ال للعناصر التي تم تعطيلها .. bootstrap والآن لنرى مثالا على ذلك ^_^: class الذي يمثل الحاوي وال div شاهد الشريحة التالي..وانتبه لل الموجودة بداخله .. كل أمر مهم أريدك الانتباه عليه ملون ^_^ أيضا أرجوا أن تقوم بالتطبيق مباشرة ^_*
  95. 95. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  96. 96. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية كباقي الخصائص ..تعمل select بكل بساطة فإن ال :Select (5 select وتستخدم هذه ال .. bootstrap بشكل سهل ومباشر بال لإدارج خيارات متعددة وكثيرة أو غير محددة العدد ...ويمكن من خلالها ^_^ ...multiple السماح باختيار خيار أو أكثر باستخدام ال لاحظ المثال..هل رأيت كيف أن ال سهل جدا..وكأنك Bootstrap وبذات الوقت .. html تعمل على يقدم خصائص كثيرة ..
  97. 97. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن .. بعد حديثنا عن العناصر من 1 الى 5 .. يتبقى لنا نقطة أخيرة (others) ..وهي النقطة رقم 6 وأقصد بها هي مجموعة من خصائص/سمات يمكن :Others (6 استخدامها للتحكم بتصميم أمر معين .. أو تمييز أمر معين مثل وجود هل تقوم .. label بجانب plan text خاصية في حال أردت وضع يتكفل بهذا .. bootstrap بكتابة تصميم خاص فيها ..الجواب لا ..ال التي تقدم لنا هذه الخصائص المفيدة للتصميم class والآن لنبدأ بذكر ال ^_^
  98. 98. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية label ويقصد بها عند وجود نص ثابت بجانب : Static control( أ ويكون ذلك باستخدام الكلاس ,horizontal على شكل ..&_& p tag داخل ال form-control-static من أكثر الأمثلة التي نستخدمها لذلك ..وضع معلومات اتصال فوق ال ورقم الهاتف ..الخ email مثل وضع ال .. form شاهد المثال (الشيفرة البرمجية بالشريحة التالية):
  99. 99. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية طبعا هذا المثال سريع ..وللتوضح ..هذه الفكرة المهمة ^_^ ... ولاحظ .. *_^ <p> لاحظ من خلال الشيفرة البرمجية الكلاس ...وال أنني تعاملت مع الأعمدة ^_^
  100. 100. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية العديد من bootstrap يوفر ال :form control state ب) ال التصاميم الخاصة في المستخدم عندما يقوم بعمليات الإدخال أو استخدام علامات التبويب ..التصميم الذي نعرفه جميعا عند القيام بمثل هذا الأمر لكن بوجود ال ..^_^ :focus هو الشكل الإفتراضي لل فهناك خصائص/تصاميم أخرى يمكنك ادراجها .. .. bootstrap يمكن تجزئة هذه الجزئية الى عدة نقاط وهي: ينطلق هذا التصميم عندما يقوم المستخدم بال :INPUT FOCUS  على عنصر معين .. وتقوم هذه الخاصية على حذف ال focus *_^.. box-shadow الموجود وإنشاء outline تابع الى الشريحة التالية
  101. 101. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية هلا لاحظت كيف تم تصفير ال ^_^... outline
  102. 102. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية تقوم هذه الخاصية على منع المستخدم من :DISABLED INPUTS  أي تفاعل مع العنصر المحدد .. بالإضافة الى ذلك يقوم بتغيير شكل مؤشر الفأرة .. ^_*
  103. 103. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية تستخدم هذه الخاصية في حال أردنا :DISABLED FIELDSETS  fieldset tag تعطيل التفاعل مع جميع الحقول الموجودة داخل ال بالإضافة الى تغيير مؤشر الفأرة ^_^.. IE *ملاحظة: هذه الخاصية يوجد بها مشكلة على جميع متصفحات ال لكي نقوم بحل هذه المشكلة داخل ال js code ..لذلك يلزمك أن تعمل .. ie
  104. 104. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  105. 105. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية VALIDATION STATES : انل رفوت ةعئارلا ةيصاخلا هذه تانايبلا نم ققحتلا جئاتنب ةصاخلا ميماصتلا نم ةعومجم.. حاجنلا دنع ريذحتلا وأ لشفلا وأ.. لا عم ةيصاخلا هذه مدختست نأ نكميوwrapper نم لكل .control-label,.form-control,.help-block التي يمكننا استخدامها فهي: class أما ال .has-warning,.has-error, or.has-success والآن ..لنشاهد مثالا عمليا ^_^ ..class انظر الى الشريحة التالية بتمعن ..وانتبه الى أماكن وجود ال
  106. 106. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية مثال: لكل عنصر wrapper انتبه لكل من العناصر ^_^.. نفذ الكود..ولننظر ما هي النتائج ^_^
  107. 107. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية شاهد نتائج تطبيق المثال السابق ^_^ الذي يحتوي على الكلاس wrapper لاحظ كيف أن اختلاف ال كيف أثر على النتائج ^_^ .. Has-warning for label only Has-warning for text only Both Both
  108. 108. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية ICONS : قبس ام ىلا ةفاضلإاب اضيأ .. نكمي ةيرايتخا تافاضا دجويف لا رصانعل اهقاحلاinput .. لا لثمicons ^_^ .. لا هذهicons سلاكلا مادختساب اهعم لماعتلا كنكميhas-feedback .. ةفاضلإاب كلذ ىلا .. لاب رفوتي هنإفbootstrap لا نم ةعئارو ةريبك ةعومجمico ةرشابم اهمادختسا كنكمي يتلا .. تحت جردني ءزجلا اذهو لا عوضومcomponent لا لخادbootstrap .. شاهد هذا الرابط ... قباسلا طبارلا للاخ نم.. لا ةعومجم تدهاش لهico ؟ ةرفوتملا.... والآن انظر الى الصورة في الشريحة التالية:
  109. 109. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  110. 110. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن لنشاهد مثالا على عمليا على ذلك ^_^.. له ^_^ ico والحقل المراد اضافة ال ico انتبه الى التتابع بين ال
  111. 111. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية الآن ما أريده منك هو تطبيق المثال السابق.. واضافة حقلان أيضا لتصبح نتائج تنفيذ الشيفرة البرمجية الخاصة بك مثل هذه الصورة: اذا انتبهت جيدا للمثال السابق ..فإني قمت باستخدام ال *_^ Valid state وبهذا أبقي دائما تفكيرك كيف يمكنني الإستفادة من الخصائص التي نعلمها ..والآن ..هل قمت بحل السؤال؟
  112. 112. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  113. 113. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن ..هل خطر ببالك سؤال؟ ..وأعتقد انك يجب أن تكون سألت عنه ..أو تراود لك.. أو أعتقد أنك قمت بالحبث عنه حتى ..(هذا طبعا اذا (^_^ :P قمت بتطبيق الأمثلة ..اعترف form السؤال هو ..كيف يمكنني التحكم بحجم الحقل الموجود داخل ال ..ان كان هذا الحجم بالإرتفاع أو بالعرض ؟؟؟ ^_^.. bootstrap الجواب على هذا السؤال الجميل ..موجود بال كيف ذلك ..الى الشريحة التالية:
  114. 114. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية :height 1) ال الموجود للعنصر عن طريق (height) يمكنك التحكم بالإرتفاع input- أو input-lg وهي class استخدام مجموعة من ال شاهد المثال: ...sm يمكنك مشاهدة الأطول عن طريق ا لنتائج inspect element المتصفح
  115. 115. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية :^_^.. width 2) ال التحكم بالعرض الخاص بالعنصر bootstrap يمكنك من خلال ال ..وهذا أمر ليس بجديد ^_*..!! ..لا تتعجب ..فكل ما عليك القيام به ....^_^ col-xs- مثل 3 ..^_^ col هو التحكم بال شاهد المثال: (لا تنسى تطبيق كل مثال تعلمته) النتائج
  116. 116. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية (3 نلآاو.. اعبط باوجلا ؟ىدح ىع لقح لك عافتراب مكحتأ نأ بجي له لا.. سلاكلا مادختسا كنكميفform-group-lg وأform-group-sm لا عمgroup .. ليمج رمأ اذهو.. ثيحب سلاكلا مادختساب رصانعلا لكل هصيلقت وأ عافترلإا ةفعاضم كنكمي ةدحاو ةرم.. لا لﯩع لمعي رملأا اذه نكلhorizontal form.. عوضوملا يف ليمجلا.. لا نأlabel عم رايخلا اذهب رثأتت اضيأ لوقحلا.. يأ ليدعتب موقت نأ نود قسانتم لكشب ميمصتلا رهظيس كلذل رمأ^_^ شاهد المثال في الشريحة التالية:
  117. 117. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  118. 118. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية بإذن لله تعالى ..وهو ال form وأخيرا ^_^... آخر موضوع في ال ..^_^ Help text كثير من الأحيان نحتاج الى وضع نص يساعد المستخدم على معرفة ما mm-dd-yy سيتم ادخاله داخل حقل معين .. مثل صيغة التاريخ ..كمثال .. أو الطلب من المستخدم ادخال حروف وأرقام لكلمة المرور ..وغيرها .. سهل جدا..ويكون عن طريق استخدام كلاس bootstrap هذا الأمر بال شاهد المثال ^_* ... help-text ال
  119. 119. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  120. 120. ملاحظة: لم أقم بكتابة عناوين لكل مثال ..وإنما فصلت بينهم بفواصل حتى أتأكد أنك ستقوم بقرائة الشيفرة البرمجية ومعرفة كل مثال والهدف منه ..ولإساعدك قمت بكتابة بعض التعليقات في الشيفرة البرمجية ..حتى تستطيع النظر للمثال وفهمه من خلال المتصفح .. Inspect element مباشرة عن طريق استخدام ال أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  121. 121. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  122. 122. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية هو التحكم بتصاميم ال bootstrap من الأمور الرائعة التي يقدمها ال بحيث يقدم لك مجموعة من الخيارات ..من خلالها .. buttons الى هذا ico يمكنك التحكم بشكل وتصميم الزر.. بالإضافة الى اضافة والآن لنشاهد ما هي ... ( form الزر ..(كما تعلمنا في درس ال :button الخيارات المتاحة للتعامل مع ال
  123. 123. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن ..بعد تعرفنا على الكلاس السابقة ..لنشاهد مثالا كيف يمكننا استخدام هذه الكلاس .. ^_*
  124. 124. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن دورك لتقوم بتنفيذ أو كتابة هذا المثال ..(اكتب الشيفرة البرمجية الخاصة بهذه الصورة ^_^) ثابت ؟ buttons الآن ..هل حجم ال مختلفا ..وهذا button الجواب بكل تأكيد ..لا ..يمكن أن يكون حجم ال أيضا .. ^_* bootstrap الأمر ..يوفره ال عن طريق استخدام مجموعة من الكلاس button يمكننا التحكم بحجم ال .btn-block و .btn-xs و .btn-sm و .btn-lg وهي
  125. 125. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية يعتمد كما bootstrap الآن الخصائص السابقة جميعها مألفوة لدينا ..فال مباشرة .. btn-lg نشاهد اسلوب موحد للتعامل مع التصميم ..فمثلا .. btn عرفت أنها تعني حجم كبير لل .. btn-block لكن الخاصية التي قد تكون جديدة علينا الآن ..هي وهذا يعني أنها .. block على شكل btn هذا الكلاس يقوم على جعل ال ^_^ ... parent كامل والخاص بال width ستأخذ ال والآن ..لنشاهد مثالا معا ^_*
  126. 126. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية النتائج
  127. 127. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية .. ^_^ Button State والآن بإذن لله تعالى سنتحدث عن ال تقدم لنا مجموعة من الكلاس الرائعة والتي تسمح لنا button state ال بكل سهولة عن طريق استخدام هذه الكلاس button بتغيير حالة ال كنا نستخدم بال ) active مثل .. bootstrap والموجودة داخل ال (:active ال css هي : button state والآن ال  ACTIVE State  DISABLED State
  128. 128. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية هذه الخاصية تقوم على اعطاء خصائص التصميم Active state 1) ال مثل الخلفية والإطار الغامق .. button لل active الخاصة بال :active مثل ال pseudo-class هذا الأمر ..لن يدعنا نستخدم ال لهذه الحالة ... يكون على جزئين (اضافة هذا الكلاس) ..إما أن active التعامل مع ال ... <a> أو الى button يضاف الى ال شاهد المثال: لاحظ .. إن التصميم أصبح وكأنك الآن تقوم بالضغط على الزر لا تعمل هنا ..لأنه hover ولم تقم بالإفلات ..لذلك حتى ال .. active باعتبار
  129. 129. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية الى ال disabled يمكننا اضافة خاصية ال :Disabled State (2 لنمنع المستخدم من الضغط على زر معين..هنا في ال button يعطينا أيضا تنسيق جميل لوحده لهذه الأزرار عند bootstrap وتكون على شكل حذف التدرج باللون وتقليل disabled استخدام ال ...% نسبة ظهور الزر الى نسبة 50 شاهد المثال: .. <a> وال button هذا التصميم يظهر أيضا لل قد قمنا باستخدام ال ا لنتائج button انتبه الى أنه في ال فقد قمنا <a> ينما في ال Disabled attribute ... disabled باستخدام الكلاس
  130. 130. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية .. disabled ملاحظات مهمة حول خاصية ال pointer-events: يتم استخدام ال bootstrap 1) في ال غير قابل <a> لمحاولة جعل ال css الموجودة في ال none للنقر.. لكن هذه الخاصية غير مدعومة من جميع المتصفحات حتى من لذلك لتستخدم خاصية مثل هذه بأمان .. opera وال 18 Ie ال 11 يلزمك كتابة جافا سكربت ..^_^ <a> لل فلماذا لا أستخدم <button> وال <a> 2) بما أننا نتعامل مع ال وال nav وأكتفي بهذا ؟.. الجواب هو بسبب وجود ال <a> دائما ال وهي موجودة تحت عنوان ..سنأتي له في الشرائح التالية navbar هي التي تعمل هناك button بإذن لله تعالى .. ستكون فقط ال ..لذلك وجب التنويه ...
  131. 131. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية ... ^_^ Button tag وهو ال Button والآن ..الى آخر موضوع داخل ال ﻣﺩﺣہ ل ..شعور جميل ^_^ ... ﻠ كان تطبيق واستخدام ل 3 .. button في أول مثال ذكرناه في موضوع ال للتذكير شاهد .. button لتعطينا تصميم ال tag أنواع مختلفة من ال الصورة .. الذي يجب أن أقوم باستخدامه ..؟!! أو أن يكون هو الأكثر tag لاكن ما ال استخداما بالنسبة لدي ؟
  132. 132. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية فإنه ينصح باستخدام ال bootstrap حسب نصيحة موقع ال أكثر ما يمكن .. وذلك لضمان التوافقية بين جميع <button> المتصفحات قدر الإمكان .., بالإضافة الى ذلك وعلى سبيل المثال ال الإصدار الأقل من 30 ..لا يدعم خاصية ال Firefox لذلك وجب تنبيهك لذلك ^_^ ..... <input> لل line-height الذي نستخدمه .. يجعل من ال html معلومة هدية لك ^_^: هل تعلم, ال داخله html tag أمر مميز؟ الجواب هو امكانية وضع <button> مثل <button>Value <b>this</b></button> بأن يحتوي محتوى .. tag والفكرة الرئيسية هي انه يسمح هذا ال
  133. 133. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن ..اذا أردت المزيد .. طبارلا اذه ةرايزب مق ..^_^ .. عرض المقالة من هنا مقتطف مهم ^_^ من داخل المقالة ... والآن ..لنشاهد جميع الأمثلة معا ...وأرجوا أن تكون قد قمت بتنفيذ الأفكار التي ذكرناها ^_^ التطبيق يعني المعرفة والخبرة...
  134. 134. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  135. 135. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية هو التعامل مع الصور ... فيمكنك جعل bootstrap من الجميل بال بحركة بسيطة ..وهي اضافة كلاس الى responsive الصورة الصورة ..كما يمكنك التحكم بشكل الصورة أيضا بإضافة الكلاس .. وهذا يعني أننا سنتحدث عن: (1 Responsive images (2 Image shapes
  136. 136. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية (1Responsive Image : ماجحأ عم ةروصلل بواجتلا ةيلمع يهو ةفلتخملا تاشاشلا .. لا مادختساب اننكميوbootstrap ةفاضا نم لا سلاكimg-responsive ... شاهد المثال: لتشاهد النتائج ..قم بتصغير حجم المتصفح .. وشاهد كيف يتغير حجم الصورة حسب حجم شاشة العرض ... شاهد نتائج تطبيق المثال بالشريحة التالية
  137. 137. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية حجم شاشة 1 حجم شاشة 2
  138. 138. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية (2Image shapes : يف رهظيس يذلا ةروصلا لكش اهب دصقيوعورشملا.. لابوbootstrap مادختسا كنكمي3 لمعل سلاك3 يهو ةروصلل ةفلتخم لاكشأ : تكون الصورة لها منحنى وليس زاوية . :img-rounded .I يصبح شكل الصورة دائري.. :img-circle .II تصميم لصورة بحيث تظهر وكأنها داخل :img-thumbnail .III اطار ..(نشاهدها بكثرة في معارض الصور ..) شاهد المثال:
  139. 139. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية المنحنى) ..) ) curve لا يدعم ال ie- شاهد النتائج: (ملاحظة: ال 8 img-rounded img-circle img-thumbnail شاهد المثال:
  140. 140. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية هي مجموعة من الكلاس المختلفة ..موجودة helper classes يقصد بال لستهل عملك .. ولنبدأ ب وهي مجموعة من الكلاس التي تستخدم :Contextual colors (1 لتغيير خصائص اللون لنص أو رابط معين ..^_*.. أيضا فإنه من يكون أغمق من اللون .. hover الجميل بهذه الخصائص ..أن اون ال المحدد بشكل تلقائي .. ^_^...شاهد المثال للكلاس التي يمكن استخدامها:
  141. 141. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية وهي الكلاس التي يمكن : Contextual backgrounds(2 استخدامها لتغيير لون الخلفية لعنصر معين.. وهي مشابه للكلاس أيضا اذا كان ..*_^ ... bg-* لكن الكلاس يبدأ ب .. text الخاصة بال فإن لون الخلفية يصبح أغمق ... .. hover له شاهد المثال:
  142. 142. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية مثل .. x يمكنك من انشاء زر اغلاق class هذا :Close icon (3 وغيرها ..بكل سهولة .. وذلك عن طريق استخدام alert الموجود بال ..^_^ close الكلاس شاهد المثال: هذا التنسيق ظهر .. x النتائج .. ^_^..لاحظ ال x وحرف ال close لإنني استخدم الكلاس اذا كنت لا ).. &times; ظهر من استخدام ال .. (HTML تعرف ذلك راجع ال
  143. 143. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية يستخدم هذا الكلاس لتعيين خلفية على شكل سهم صغير : caret(4 ..وظيفته هي الدلالة أو الإشارة الى أمر معين ..ونراه افتراضيا .في كما نستخمه في القوائم .. (DropDown menu) القوائم المنسدلة ... sup menu للدلالة على وجود شاهد المثال: مختلفة css لإعطاء خصائص custom class لقد قمت باستخدام ال لتغيير اتجاه السهم (المؤشر كما في الصورة ^_^).. النتائج قم بالبحث أو محاولة كتابة الخصائص لتخرج بنتائج كما في المثال الذي أمامك ..
  144. 144. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية وكما .. float المهمة ..ال css إن من خصائص ال : Quick floats(5 ويكون هذا .. right وإما left يكون إما float نعلم فإن استخدام ال ولكن مع اعطاء أفضلية بالتنفيذ (اجبار) لأن .. bootstrap أيضا بال .. flaot: * !important الخاصية المكتوبة من تنفيذ الكلاس هي أما بخصوص الكلاس التي يمكن استخدامها فهي: navbar-left و pull-left ( أ navbar-right و pull-right ( ب فسنتحدث عنها بإذن لله في ال .. navbar-* بخصوص ال ...pull-* لكن الآن سنكتفي بال .. component
  145. 145. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية شاهد مثالا على الشيفرة البرمجية وناتج التنفيذ: لذلك نراها ..float: left قامت بعمل .. pull-left كما تلاحظ .. فإن ال فأخذ أقصى .. float: right.. hikmat بأقصى اليسار .. بينما اليمين.. ولاحظ ..اذا قمت بالنظر الى الشيفرة البرمجية ..ستجد *_^...important الناتج
  146. 146. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية اذا امعنت النظر في المثال السابق.. ستجد أنني استخدمت :Clearfix (6 هذا الكلاس كان مهم .. clearfix ويحتوي على كلاس وهو div استخدامه ..لأمنع الصفوف / العناصر التي ستأتي بعد هذا المثال من أن بمعنى آخر ..وهي بال float لل clear تتداخل معها .. أي تقوم بعمل ..clear: both تقوم بكل بساطة على استخدام الخاصية css شاهد المثال: لقد قمت بأخذ المثال السابق ..لكنني لم أقم clearfix بوضع ال فانظر الآن النتائج .. وقارنها بنتائج المثال السابق ... النتائج
  147. 147. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية شاهد المثال بشكل كامل: والآن ..بعد مشاهدتنا للمثالين ..وحالة استخدام كل منهما ..فهذا لا يعني أنني دائما ..أو أن عدم استخدامها خطا.. ففي clearfix يجب ان أستخدم ال بعض الحالات ..مؤجل استخدامها لمرحلة أخرى ..وهذا مفيد جدا.. وكمثال مشهور .. الصور التي يأتي بجابنها النص .. فلو استخدمت ال بعد الصورة مباشرة ..سيقى النص أسفل الصور ..لكنني clearfix أأجل وضعها الى بعد النص .. وبهذا أنهي كل المشاكل بحركة واحدة ^_^
  148. 148. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية من الأمور التي نستخدمها ونحتاج : Center content blocks(7 block اليها في كثير من الأحيان ..هو تنصيص المحتوى داخل الذي أتواجد فيه .. block معين... ويكون هذا العمل على مستوى ال وهي جعل css وفكرة التنصيص ..بسيطة جدا ..ونستخدمها كثيرا بال ...margin: 0 auto ونقوم بإعطائه .. block العنصر يمكنك القيام بذلك بحركة واحدة ^_* وهي bootstrap والآن باستخدام ال ^_^ center-block استخدام الكلاس شاهد المثال: (لا تنسى تطبيق كل مثال– الآن شاهد النتيجة ..ثم انتقل الى الشريحة التالية لمعرفة الكود ومن ثم تطبيقه ^_^)
  149. 149. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية شاهد الشيفرة البرمجية الآن .. لكن .. span داخل center-block لاحظ أنني قمت باستخدام الكلاس سيتحول الى span هذا لن يحدث مشكلة في عملية التنصيص ..لأن ال هذا كلاس أنا ..set-block-size واذا لاحظت ..فإنه يوجد .. div لل width أو max-width قمت بانشائه ..والهدف منه هو تحديد حتى تتم عملية التنصيص وتعمل بشكل صحيح .. ^_^ block فعرفنا ما هي .. .. bg-info أما ال ... block لاحظ التنصيص لل
  150. 150. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية إظهار وإخفاء المحتوى أمر : Showing and hiding content(8 مهم ..والتحكم بعملية الإظهار والإخفاء أمر أكثر أهمية ..لقد تطرقنا لكن الآن ..سنتكلم عن 2 كلاس .. hide سابقا الى استخدام الكلاس .. hidden وال show آخرين .. وهما ال أنها أكثر أداء hide ما تتميز به عن ال show & hidden هذه الكلاس بالإضافة الى .. screen reader وتفاعلية في حال كنا نتعامل مع ذلك ..اذا احتجنا الى الزام (اجبار) عنصر معين على الإختفاء فإنني والسبب في ذلك ..أن hide كمثال ..بدلا من ال hidden أستخدم ال وبوجود خاصية ال important هذا الإخفاء يكون مع استخدام ال فتكون show أما ال .. visibility وخاصية ال display ... Display: block !important
  151. 151. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية أيضا .ويقوم invisible بالإضافة الى ما ذكرنا ..فيمكننا استخدام كلاس بدون visibility: hidden; هذا الكلاس على استخدام خاصية ال .. display أو important وال display **) ملاحظة مهمة... اذا كنت لا تعرف الفرق بين ال من موقع css فيمكنك الإطلاع على دورة ال visibility ... 2nees.com شاهد المثال:
  152. 152. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية Screen reader and keyboard navigation content(9 وقلنا أنها تخفي المحتوى وتبقية .. sr-only هل تتذكر عندما تحدثنا عن ال قادرة على قارئة المحتوى الذي قمت بإخفائه screen reader ال ونسهل على ..SR ..لكن بالإضافة الى ذلك ..لأزيد من التحكم لهذه ال إخواننا أصحاب الإحتياجات الخاصة العمل على الموقع .. يمكننا استخدام هذا الكلاس يقوم على عرض .. sr-only-focusable ال المحتوى للشخص(يتجاوب مع الفعل الذي يقوم به الشخص على لوحة والكلاس sr-only المفاتيح), ويكون هذا الفعل ناتج عملية دمج الكلاس اي استخدام ال 2 كلاس معا) .. ) ... sr-only-focusable
  153. 153. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية هذه خاصية تستخدم كلاس : Image replacement(10 هذا الكلاس يقوم على تعريف خصائص تخفي النص .. text-hide المكتوب.. وهذه العملية بغرض وضع خلفية صورة بدلا من النص الخاصة بوسائل التواصل ico ..وكثيرا ما نستخدمها في تعاملنها مع ال الإجتماعي ^_^ .. شاهد المثال: الفكرة بهذا الكلاس ..هي جعل حجم الخط 0 والخلفية ... shadow واخفاء الإطار وال
  154. 154. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية .. helper class بهذا ..نكون انتهينا بفضل من لله تعالى ..من ال لكن الأهم من كونك وصلت الى هنا ... هو هل قمت بتطبيق الأمثلة ؟! أبقى أركز على تطبيق الأمثلة لأنه الموضوع المهم لكسب المعرفة .. فلا تتكاسل وتكتفي بالقرائة ... والآن ..لنشاهد جميع الأمثلة السابقة معا ...يرجى الإنتباه لكل جزئية في المثال .. ومشاهدة الشيفرة البرمجية الخاصة بها ... ^_*
  155. 155. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  156. 156. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية mobile first من أهم مميزاته أنه .. bootstrap لقد ذكرنا أن ال مجموعة من الكلاس المميزة التي bootstrap ..لذلك يقدم لك ال تمكننا من التعامل مع الشاشات المختلفة ...لكن هناك أمر مهم ..وهو استخدم هذه الأوامر بذكاء ..وليس بكثرة ..وأقصد بذلك أنه ..اذا استخدماتها بكثرة دون العناية أو بمعنى أدق ..دون تخطيط ..فستصل الى مرحلة ..تجد نفسك بها تقوم ببناء موقع من جديد .. وهذا الأمر لا نريده ..لا نريد أن نأخذ نسخة من المشروع ..إنما نريد أن نقوم فقط ببعض التعديلات لنصل الى المطلوب ... والآن ..لنشاهد معا ..الجداول الخاصة بالكلاس المخصصة للتعامل مع الشاشات المختلفة ^_^
  157. 157. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية وهذه تعني أنه سيظهر في حجم الشاشة المخصص له ... (grid قمنا بشرحها سابقا (تذكر ال .. visible-*-* ال فهذه تعني قم بإخفاء هذا العنصر في حجم الشاشة هذا .. أما الباقي سيكون ظاهرا .. .. hidden-* أما ال لاحظ الفرق بين الكلاسين ..من خلال الجدول الذي أمامك ^_^
  158. 158. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والذي نعمل عليه الآن في هذه الدورة .. أصبح بإمكاننا استخدام الشكل ... bootstrap من الإصدار ال 3.2 لل .. classes التالي من ال تشرح ما سيقوم به ..وللتوضيح ..فإن ما تقوم به هذه ال css وكما تلاحظ من الجدول ..فإن الكلاس وخصائص بال وإما block لخاصية معينة من الإختفاء الى الظهور .. أي التحويل الا ال display هو تحويل شكل ال .. classes ^_^ .... inline-block وإما الى ال inline الى ال شاهد المثال في الشريحة التالية:
  159. 159. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية النتائج لا يوجد نتائج ..هنا
  160. 160. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية أيضا ..هناك مجموعة من الكلاس ..التي يمكن أن نستخدمها لغايات الطباعة.. فعند طابعة صفحة معينة .. لا أحتاج الى الكثير من الأمور ..وأهتم بما لهذا class يقدم لك bootstrap هو مهم في هذه الصفحة .. وال الأمر وهي في هذا الجدول .. شاهد المثال(ما هي النتائج التي تتوقعها ..(في المتصفح وعند الطباعة):
  161. 161. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  162. 162. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية الآن ..هل قمت بتطبيق الأمثلة؟ لا عقوم ىلع دوجوم عئار لاثم ىلا رظنت نأ نلآا كديرأbootstrap وهو (عرض المثال من هنا) أيضا ..شاهد الأمثلة السابقة من هنا ^_^: والآن .. نكون انتهينا بحمد لله تعالى من الجزء الأول من دورة ال مجمل ما تم ذكره الى ) css وهو الجزء المتعلق بال .. bootstrap ... ^_^ (css هذه الصفحة هو
  163. 163. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  164. 164. Components أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  165. 165. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية في موضوع سابق (الفورم) ... والآن أود Glyphicons لقد تكلمنا عن ال التذكير به لذكر بعض الملاحظات التي يتوجب عليك اتباعها .. شاهد الصورة ... هل تذكرت الموضوع الآن .. اذن لنتابع ..
  166. 166. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية ملاحظات: عالي .. والسبب في ذلك استخدام كلاس مشترك لكل ico 1) الأداء لهذه ال ico ومن ثم استخدام كلاس خاص لكل .. glyphicon وهو ico ال نحتاجها .. حتى لا تتداخل الكتابة .. ico 2) تأكد دائما من وجود مسافة بين النص وال ico مع ال داخل كلاس العنصر الرئيسي glyphicon 3) لا تستخدم كلاس ال يحتوي هذه الكلاس ... <span> مباشرة ... وإنما قم بتعريف الذي قمنا بتعريفه ..أو أي حاوي آخر <span> 4) يجب أن يكون ال (no text, no child فارغا ..(أي بدون نص أو عناصر أخرى
  167. 167. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية مثال:
  168. 168. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن .. بعد استرجاعنا لبعض المعلومات .. لنبدأ معا في الموضوع الثاني .. Dropdowns وهو component من ال يقصد بها القوائم المنسدلة .. والتي يكثر استخدامها Dropdowns ال الصفحات الرئيسية لعرض الروابط .. أو في لاختيار خيار من مجموعة خيارات أخرى ... الخ من الإستخدامات المهمة ..^_^ يلزمك استخدام كلاس واحد فقط لتحويل قائمة الى .. bootstrap في ال يوضع هذا الكلاس داخل .. ^_^ dropdown وهو dropdowns الحاوي الخاص بالقائمة ^_^ ... لنشاهد مثالا معا ^_^
  169. 169. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية
  170. 170. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية شرح مكونات المثال السابق: هو كلاس الزامي لتعمل ال .. div الموجود في ال dropdown 1) كلاس بشكل صحيح .. أو يمكنك استخدام كلاس آخر ..المهم أن يكون dropdown .. relative هي المسؤولة عن عملية .. attr هذه ال data-toggle="dropdown” (2 التبديل بين الإظهار والإخفاء للقائمة عند الضغط عليها .. هذا الكلاس مهم ليعطي تنسيق القائمة نسقا class="dropdown-menu” (3 مختلفا عن الشكل الإفتراضي ..وهو الزامي لتعمل القائمة المنسدلة بشكل صحيح ... هذا الكلاس يستخدم لإنشاء فاصل بين عناصر القائمة.. .. divider (4 الخصائص التي تم ذكرها هي الإلزامية والتي يجب أن تتوافر في كل الما الخصائص المتبقية فهية اضافة ... ... dropdown
  171. 171. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن ..السؤال الطبيعي الذي يتوارد اليك ..ما هي فائدة الخصائص الأخرى ؟ الجواب هو: تستخدم لإعطاء أولية بتحديد عنصر معين عند الضغط : Tabindex (1 من لوحة المفاتيح .. والقيمة الخاصة للبدأ هي 1..وفي Tab على ال على tab حال استخدمنا ال - 1 .. فهذا يعني أنني سأوقف عمل ال عناصر هذه القائمة... هذه الخاصية لها عدة استخدامات ..أهمها أننا نخبر ال :Role (2 كيف يمكنه أن يتعامل مع هذا العنصر .. لذلك تجد screen reader أي عنصر من قائمة .. واذا أخذ الرابط ..menuitem تأخذ a أن ال فهذا يعني أن هذا يجب معاملته على أنه زر .. role=“button” ال أيضا .. ... screen reader وليس رابط ..من قبل ال
  172. 172. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية 2) (تابع النقطة الثانية) .. أيضا فإنه مفيد في التعامل مع الجافا سكربت .. كمثال فهنا .. *[role="button"] وذلك لتنفيذ أمر معين ..باستخدام الذي يساوي role سيقوم بتنفيذ أمر معين على جميع من يملك ال أيضا .. تقوم على دعم المتصفحات القديمة ..فالمتصفحات ... button لكن .. html الموجودة بال 5 <main> الجديدة كمثال ..تدعم ال لمعرفة ذلك .. role=“main” المتصفحات القديمة يمكنها استخدام ال ..وبهذا تحل أيضا مشكلة ... طبعا هذا الأسلوب قد يكون غير مهم جدا الآن ..الا أن استخدامه قد يكون ذو فائدة لتأكيد التوافقية بين الأجهزة .. لكن عما قريب .. ستصبح غير ضرورية ...والآن ..لنشاهد مثالا ^_^ ...
  173. 173. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية طبق الأمثلة السابقة ... ثم انتقل الى الموضوع التالي ^_^
  174. 174. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن ..هل هذه القائمة يجب أن يتم عرضها باتجاه واحد فقط ؟! بشكل سهل جدا.. وذلك align يمكنك التحكم بال bootstrap لا ..بال الى ال dropdown-menu-right .. عن طريق اضافة الكلاس بتكون الها خصائص من كلاس ال ul الفكرة أن ال ... ^_^ ul %100 .. و top هذه الخصائص تكون .. dropdown-menu هو 0 .. عندما أقوم باستخدام ال left فإن هذا يختلف وتصبح القيم .. dropdown-menu-right ... right: وال 0 Left: auto شاهد المثال ^_^ بالشريحة التالية..
  175. 175. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية 
  176. 176. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية ^_^ header بعد الإتجاه .. ننتقل الى ال ..... ^_^ P:... ؟ ما بك يا أخ العرب هل خطر ببالك أن تقوم بإضافة عنوان لكل جزء من القائمة ..أو بعد عدد معين من العناصر ..لتمييز العناصر الموجودة داخل القوائم ..^_^ اذا خطر ببالك ..ذلك أو لم يخطر ببالك .. لنتابع معا كيف يمكننا فعل ذلك ^_^ (ملاحظة.. أنا ما خطرت على بالي -_-)
  177. 177. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية يمكننا <li> داخل أحد ال .. dropdown-header باستخدام الكلاس يا سلام على سهولة الموضوع ^_^ .. header من انشاء هذا ال لنشاهد مثالا ^_^
  178. 178. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية وهو كيفية تعطيل أحد Dropdowns والآن ..الى آخر موضوع داخل ال العناصر الموجودة داخل القائمة ^_^ ... disabled يتم تعطيل أي من عناصر القائمة عن طريق استخدام كلاس شاهد المثال ^_^ .. <li> داخل ال
  179. 179. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية ملاحظات: للقائمة المنسدلة قمنا باستخدام ال align 1) لعمل ال وهذا الأمر من الإصدار 3.2 لل .. dropdown-menu-right أما الإصدارات الأقدم فكانت تستخدم ال .. bootstrap لكنها الآن اهملت ..^_* .. pull-right 2) قد تحدث بعض المشاكل في حال استخدام القوائم المنسدلة ..وتكون الخاص بها .. parent بينها وبين ال cropped المشكلة عادة مشكلة لبعض customized ويكون حل هذه المشكلة ..بأن تقوم بعمل يعني تعديل أو اضافة خصائص) لتعمل بالشكل ) css خصائص ال الطبيعي ...
  180. 180. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية فيجب ,(toggle 3) لتعمل هذه القائمة بالشكل الصحيح (أي يحدث هناك الإفتراضي الذي template تصمين السكربت .. وهنا وحسب ال نعمل عليه .. فإنه تم تضمين السكربت من خلال استخدام ال في الصفحات ^_^ .. .. bootstrap.min.js وآخيرا .. ﻣﺩﺣہ ل رب العالمين .. موضوع سهل وجميل ويختصر عليك ﻠ الكثير الكثير من الوقت والجهد ^_^... والآن اذا انتهيت من تطبيق وقرائة الأمثلة السابقة .. قم باستعراض جميع الأمثلة السابقة من هنا ^____^
  181. 181. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  182. 182. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية على صف button الهدف منها وضع أكثر من Button groups ال واحد ..وبشكل متلاصق ^_^ .. والآن ..لنشاهد ملخصا عن ما يحتويه هذا الموضوع .. (لكبر حجم الصورة .. تم فصلها الى 3 قطع) ( (الصورة 1 وتمثل ملخص لأسماء الكلاس التي يمكننا العمل عليها داخل ...btn-group
  183. 183. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية الصورة 2 الصورة 3
  184. 184. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية بعد اطلاعك على الصور السابقة .. ما يهمني هو أن تعرف كل كلاس ..وما وظيفته .. والأمثلة التي بجانبها ما هي الا مثال على طريقة الإستخدام لكل كلاس ..^_^.. والآن ..لنشاهد أمثلة على كل كلاس ^_^ الناتج ^_^ btn-group مثال 1
  185. 185. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية مثال 2 toolbar الناتج
  186. 186. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية مثال 3 Size الناتج
  187. 187. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية الناتج لا تنسى تطبيق الأمثلة جميعها .. مثال 4 Vertical
  188. 188. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية الناتج مثال 5 Nesting Group إن كنت تذكر ..فإنني قلت بأن القائمة المنسدلة ..لا أو dropdown يمكن أن توجد الى داخل الكلاس .. relative أي كلاس آخر يحتوي من خصائصه أنه btn-group كلاس ال ^_^ relative
  189. 189. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية لهذه Justified هو Button groups وآخر موضوع عن ال btn المجموعات ^_^ ...هذه الخاصية تعني جعل جميع عناصر ال التي تأتي على صف واحد ..ذات حجم متساوي .. ومجموع العرض الخاص بهم ^_^.. parent الخاص بهذه الأزرار يساوي عرض ال btn-group-justified يمكن القيام باستخدامها عن طريق الكلاس شاهد المثال: (شاهد النتيجة ..ثم انظر الى الكود في الشريحة التالية)
  190. 190. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية الآن شاهد الشيفرة البرمجية ^_^: ... ماذا تلاحظ ..قم بتطبيق المثال ..ثم انتقل الى الشريحة التالية ^_^...
  191. 191. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية الخاصة بكل btn-group بعد تطبيقك للمثال .. أريدك أن تقوم بحذف ال الرئيسي .... wrapper والإبقاء على ال <button> ليصبح الشكل كالآتي: بعد ذلك قم بتنفيذ المثال ..وشاهد النتيجة ...ثم عد لتكمل الموضوع _^
  192. 192. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية ملاحظات: عليك بوضعها داخل .. justified نريد أن نضعها داخل ال btn 1) كل btn- داخل ال btn ويمكنك وضع أكثر من .. btn-group كحاوي btn-group الواحد .. فلا تنسى ذلك ..استخدام ال group بالإضافة Nesting أمر مهم .. وهذا يعني أننا نعمل على btn لكل الى هذا الكلاس .. الا اذا تم .. a أو ال btn الخاصة بال border لا يدعم ال ie- 2) ال 8 ... btn-group وضعها داخل بهذا ..نكون انتهينا من هذه الجزئية أيضا ان شاء لله ^_^.. لننتقل معا الى موضوع جديد ^_^ ..لكن شاهد المثال أولا:
  193. 193. أنيس حكمت أبوحميد aneeshikmat@gmail.com / دورة مجانية
  194. 194. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية .. dropdowns لقد تكلمنا في الموضوع الثاني من الجزء الثاني عن ال .. Button dropdowns لكن الآن ..سأتكلم عن موضوع ال لا يوجد اختلاف جوهري ..فالبنية التركيبة هي واحدة تقريبا .. لكن هناك مجموعة من الإضافات التي يمكننا استخدامها وتعطينا ميزة جميلة .. لنشاهد معا ^_^.. وأولا لنضع المثال بأبسط أشكاله كالمعتاد ^_^
  195. 195. أنيس حكمت أبوحميد / aneeshikmat@gmail.com – دورة مجانية والآن .. الصيغة العامة.. عرفناها .. والمثال السابق ..استخدمناه أيضا في لكن ما الجديد والإضافة الى الآن !! .. btn-group موضوع ال اذا رغبت بمعرفة ذلك .. لنبدأ بهذا العنوان ^_^ Split button dropdowns (toggle) وهذه تعني قائمة منسدلة مع وجود زر مسؤول عن تفعيل ال للقائمة المنسدلة ..وليس الكبسة ككل ^_^ ... لنشاهد مثالا معا ^_^

×