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


الدرس: النشاط: اصنع صفحة ويب بسيطة


الصفحة السابقة
نشاط_الجزء الثاني
أهلا ومرحبا بكم في هذا النشاط!
شرحت لك في الدورة التدريبية كيفية عمل تصميم باستخدام Bootstrap ، لقد حان الوقت الآن للتدرب.

مهمتك


مهمتك هي إنشاء صفحة ويب من العرض المتوقع الذي يمكنك العثور عليه أدناه.
ملاحظة: الألوان والخط المستخدمان مثبتان بالفعل في كود CSS المتاح ، يمكنك تغييرهما إذا كنت ترغب في إنشاء جو ملون آخر.
على الشاشة الكبيرة والمتوسطة ، يكون الجانب التالي مطلوبًا:
jQuery web
  • رأس مع شعار على اليسار ويتركز العنوان ،
  • جسم به 3 صور ، مفصولة بهامش صغير ، وبدون هامش على حواف النافذة ،
  • تذييل مع 5 أزرار تركز على الروابط الاجتماعية.
على الجهاز اللوحي ، نريد الجانب التالي:
jQuery web
  • • رأس مع الشعار على اليسار ويتركز العنوان ،
  • • جسم به 3 صور ، مفصولة بهامش صغير ، هذه المرة يجب أن تأتي الصورتان الصغيرتان تحت الحافة الكبيرة ، ولا يوجد هامش على الجانبين ،
  • • تذييل مع 5 أزرار تركز على الروابط الاجتماعية.
على الهاتف الذكي ، نريد الجانب التالي:
jQuery web
  • رأس مع توسيط العنوان ولكن بدون الشعار ،
  • جسم به 3 صور مكدسة ، مفصولة بهامش صغير ، بهامش صغير بالنسبة لحافة الشاشة ،
  • تذييل مع 5 أزرار تركز على الروابط الاجتماعية.
من الواضح أنك يجب أن تستخدم Bootstrap إلى أقصى حد لهذا الإدراك وتضع قواعد نمطية محددة عندما تصل إلى حدود فئات Bootstrap .

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


أقدم لك ملفًا أساسيًا "نشاط الجزء 2":
jQuery web
في هذا الملف لديك:
  • · في الجذر ، ملف index.html يحتوي على البنية الأساسية للصفحة ،
  • · في مجلد الأصول / img الصور الأربعة اللازمة للصفحة.
من الواضح أن الكود الموجود في ملف index.html لا يحتوي على عناصر للتخطيط ، الأمر متروك لك لإضافته. وفقًا لملف البداية ، تتراكم عناصر الصفحة بعد التدفق.
النمط الأساسي موجود من أجل:
  • · الخط المستخدم ،
  • · لون الخلفية ،
  • · لون النص ،
  • · عرض الصور
  • · هوامش الصور وفقا لدعم.
من ناحية أخرى يتم توفير:
  • · تحميل الخط Google Font المستخدم ،
  • · تحميل CDNبـCDN لـBootstrap والرموز Font Awesome .
ملاحظة: قواعد CSS المقدمة ليست سوى مثال ، يمكنك تعديلها إذا كنت ترغب في إنشاء جو ملون آخر.

دليل الانشاء


هناك عدة طرق لتحقيق هذه النتيجة. إذا كان لديك صعوبات هنا هو توضيح لما يمكن القيام به.
حاوية
بالنسبة للصفحة ، من الضروري تصور حاوية ، حتى تتمكن من معرفة ما إذا كان يجب أن يكون ثابتًا أم لا.
في الراس
بالنسبة للرأس ، من الممكن استخدام jumbotron (من الضروري زيادة تحميل لون الخلفية والهامش السفلي لاحترام الصورة المطلوبة ) . يمكننا بعد ذلك في هذا jumbotron استخدام الشبكة لتوزيع احتلال الشعار والعنوان. هناك فئة Bootstrap لإخفاء الشعار على الهواتف الذكية. هناك أيضا واحد لتوسيط النص.
جسم الصفحة
يمكن استخدام الشبكة لتوزيع الصور. النقطة الصعبة هي في الهوامش المطلوبة بين الصور. لراحتك لدي القواعد المقابلة.
أسفل الصفحة
بالنسبة لتذييل الصفحة ، لدينا صف وتوسيط. يجب عليك إنشاء بعض القواعد للحصول على أزرار مستديرة (مثال يظهر في الدورة التدريبية). صور Font Awesome مدمجة بالفعل.
معلومات عامة على الصفحة
الذي تم اختياره للصفحة هو من خطوط خطوط Google ، وهذا هو الخط Bitter . تم تعيين لون الخلفية على # eef ولون النص إلى # 259. كل هذا موجود بالفعل في ملف index.html المقدم.
الملفات
معايير التقييم تكون على:
  • · ظهور شعار العنوان (لون الخلفية) ،
  • · ظهور الشعار وفقًا للدعامات (يجب أن يختفي على الهواتف الذكية) ،
  • · توزيع الصور وفقا لدعامات ،
  • · ظهور الأزرار في أسفل الصفحة وتوسيطها.
حظ موفق !