اجعل Bootstrap في متناول اليد


الدرس: النشاط: اصنع صفحة ويب معقدة باستخدام مكونات JavaScript


الصفحة السابقة
أهلا ومرحبا بكم في هذا النشاط!
شرحت لك في الدورة كيفية القيام بالتخطيط باستخدام Bootstrap . مع النشاط الأول ، كان عليك عمل تخطيط بسيط. سننظر الآن في تصميم يتضمن مكونات JavaScript الإضافية.

مهمتك


مهمتك هي إنشاء صفحة ويب من العرض المتوقع.
  • على الشاشة الكبيرة والمتوسطة نريد الجانب التالي:
    jQuery web
  • يوجد في أعلى الصفحة شريط تنقل ، وفي الأسفل يوجد شريط دائري يتكون من 4 صور.
  • يجب أن يعمل التنقل في scrollspy . يجب أن يؤدي الاستقبال(Accueil) إلى الكتلة الأولى ، “Qui sommes-nous ?”في المربع الثاني و "Contact" بالنموذج. من ناحية أخرى ، يجب أن يكون التمريرFluid .
أدناه ، ثلاث كتل:
jQuery web
يحتوي الأولان على نص وصورة ، والثالث نموذج. تحتاج إلى توفير الشفافية لرؤية صورة الخلفية (0.5 قيمة جيدة). كل شيء يتبعه تذييل مع أزرار الرموز الاجتماعية.
على الأجهزة اللوحية والهواتف الذكية ، يظل شريط التنقل والرابط دون تغيير مع الفارق الوحيد الذي يجب أن يتراجع الشريط عنه على الهاتف الذكي:
jQuery web
بالنسبة للباقي ، يجب تكديس كتل النصوص والصور كما يلي:
jQuery web
يجب أن يتكدس النموذج أيضًا:
jQuery web
من الواضح أنك يجب أن تستخدم Bootstrap إلى أقصى حد لهذا الإدراك وتضع قواعد نمطية محددة عندما تصل إلى حدود فئات Bootstrap .

المجلد الأساسي


أقدم لك ملفًا أساسيًا "نشاط الجزء 3":
jQuery web
في هذا الملف لديك:
  • في الجذر ، ملف index.html يحتوي على البنية الأساسية للصفحة ،
  • في مجلد assets/img الصور 7 اللازمة للصفحة.
من الواضح أن الكود الموجود في ملف index.html غير مكتمل للتخطيط ، ويعود الأمر إليك لإكماله. النمط الأساسي موجود فقط لتحميل صورة الخلفية. ستحتاج إلى تخطيط الأسلوب من أجل:
  • الخط المستخدم ،
  • لون الخلفية ،
  • لون النص ،
  • هوامش جماليات ،
  • شفافية Jumbotrons ...
كما يتم التخطيط لشحنات Bootstrap CDN وأيقونات Font Awesome و jQuery ومكتبة Bootstrap Javascript .
تمت إضافة كود JavaScript أيضًا للتمرير السلس لـ Scrollspy .

دليل الإبداعية


هناك عدة طرق لتحقيق هذه النتيجة. إذا كنت تواجه صعوبات هنا توضيح لما يمكن القيام به:
شريط التنقل
إنه شريط كلاسيكي مثبت في الأعلى بخلفية سوداء ويتراجع على دعامات صغيرة.
دائري
إنه دائري كلاسيكي به: مؤشرات الشريحة والعناوين وأزرار التنقل.
جسم الصفحة
تم بالفعل معالجة نص الصفحة ، يمكنك أن ترى كيف تم عمل الترميز.
أسفل الصفحة
بالنسبة لتذييل الصفحة لدينا صف وتوسيط. صور Font Awesome مدمجة بالفعل.

معايير التقييم


سوف تغطي معايير التقييم:
  • تخطيط وفقا للدعم ،
  • تشغيل دائري ،
  • شريط التنقل ،
  • تشغيل Scrollspy .

حظ موفق !