كيفية إنشاء موقع ويب أنيق وبسيط باستخدام خطوات Bootstrap 4: 7

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:38

الغرض من Instructable هذا هو إعطاء الأشخاص المطلعين على البرمجة - HTML أو غير ذلك - مقدمة بسيطة لإنشاء محفظة عبر الإنترنت باستخدام Bootstrap 4. سأوجهك خلال الإعداد الأولي لموقع الويب ، وكيفية إنشاء عدد قليل من كتل المحتوى المختلفة ، وبعض المشاكل التي قد تواجهها.

تم تقسيم الحافظة إلى عدد من الخطوات الأصغر لمحاولة جعلها أكثر قابلية للإدارة: إطار HTML وإطار CSS وإطار Javascript وشريط التنقل والصفحة الرئيسية (مع كتل المحتوى).

إذا كانت توضيحاتي لشيء ما لا تزال في حيرة من أمرك ، فلا تتردد في ترك تعليق بأسئلتك أو اقتراحاتك أو في google العنصر الذي تشعر بالارتباك بشأنه. هناك العديد من الموارد المتاحة لبرمجة مواقع الويب و Bootstrap.

ملاحظة: هذا الدليل ليس شاملاً ويجب عدم استخدامه كبديل لمعرفة كيفية البرمجة بتنسيق HTML أو CSS أو Javascript.

الموارد المطلوبة

• التمهيد 4
• مسج 3.3.1

موارد اختيارية

• FontAwesome
• خطوط جوجل
• تسليط الضوء. js

إذا كنت ترغب في التخطي إلى المثال الكامل أو إلقاء نظرة على المستودع:

• مثال كامل
• مخزن

ملاحظة: سأستخدم Sublime في الصور لأمثلة إذا كنت ترغب في المتابعة مع نفس محرر النصوص.

الخطوة 1: الإعداد

إعداد المجلد

1. أنشئ مجلدًا في مكان ما حيث يمكنك تخزين كل شيء سنقوم بتنزيله. سيكون هذا هو الدليل الجذر للمحفظة.
2. أنشئ مجلدًا داخل ذلك المجلد باسم "bootstrap"
3. قم بإنشاء مجلد آخر داخل مجلد محفظة الجذر الخاص بك باسم "jquery"

مجلد المحفظة

| ----- bootstrap | ----- مسج

التمهيد 4

1. قم بزيارة موقع الويب الخاص بهم وانقر فوق الزر "تنزيل" أسفل قسم "Compiled CSS and JS".
2. احفظ ملف.zip في مجلد "التنزيلات" أو في مكان آخر مناسب.
3. افتح ملف.zip واستخرج مجلدي "css" و "js" إلى مجلد "bootstrap" الذي أنشأته سابقًا.

مسج

1. قم بزيارة موقع الويب الخاص بهم وقم بتنزيل "uncompressed، development jQuery 3.3.1"
2. احفظ هذا الملف داخل مجلد "jquery" الذي أنشأته مسبقًا.

جميع الأطر جاهزة الآن عندما نبدأ العمل على المحفظة الفعلية.

الخطوة 2: إطار HTML (index.html)

اسمك

هذا الإطار ليس شيئًا معقدًا بشكل مفرط ، لكني أريد أن أشرح الأغراض العامة للإعداد.

Bootstrap JS بعد jQuery

يبدو أن هناك نوعًا من التداخل بين ملف Javascript الخاص بـ Bootstrap وملف jQuery. لم أختبر مدى اتساع هذا التداخل ، ولكن أحد الأمثلة هو وظيفة القائمة المنسدلة التي أستخدمها في شريط التنقل. إذا قمت بالتحميل في Bootstrap أولاً ، فلن يعمل زر القائمة المنسدلة.

FontAwesome

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

hightlight.js

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

ملاحظة: كن على دراية بالأماكن التي أستخدم فيها روابط مشفرة لملفات مثل الرمزين و high.js. أيضًا ، نظرًا لأن Bootstrap و jQuery فقط هما المطلوبان ، فلا تتردد في إضافة أو إزالة أي أطر عمل أخرى. إذا قمت بإزالة أي منها ، فتذكر إزالة سطور التعليمات البرمجية التي تتوافق لاحقًا.

الخطوة 3: إطار CSS (style.css)

/ * * نأمل أن يؤدي تقليل لون bg إلى اللون الرمادي وتغيير نمط الخط إلى تسهيل استهلاك موقع الويب * / body {background: gray؛ عائلة الخطوط: "Open Sans"، sans-serif؛ }

/*

* هذا يضمن أن شريط التنقل أعلى كل شيء * / nav {z-index: 9999؛ }

/*

* يجب أن يجعل هذا نص الفقرة أكثر قابلية للقراءة * / p {font-size: 18px؛ أعلى الهامش: 5 بكسل ؛ الهامش السفلي: 5 بكسل ؛ }

/*

* هذا يضمن أن جميع كتل التعليمات البرمجية الخاصة بي منسقة بشكل صحيح * / code {text-align: left؛ }

/*

* لا أريد أن تحتوي القوائم على الرموز النقطية * / li {list-style-type: none؛ }

/*

* الروابط زرقاء بشكل افتراضي ، وأريد أن تتماشى مع نمط Bootstrap * / li a ، a {color: white؛ }

/*

* أقوم بربط علامة فئة إلى div يحتوي على شريط التنقل للتأكد من عدم تداخل المحتوى * /.navFix {padding-bottom: 70px؛ }

/*

* زيادة الحجم تمتد إلى navbar * /.social-media {font-size: 1.3em؛ }

/*

* لون التمييز الافتراضي للروابط المنسدلة أبيض * /.dropdown-menu a: hover {background-color: # 212529؛ }

/*

* إجبار divs على عرض ملفات pdf على ارتفاع معين * /.pdfFill {height: 45rem؛ }

/*

* أضف بعض التباعد بين الأزرار وكتل التعليمات البرمجية * /.codeStyle {padding-top: 30px؛ }

لقد قمت بتضمين عناصر CSS المستندة إلى المحتوى في هذا الإطار لمحاولة توفير بعض الوقت لك لاحقًا. جميعها بسيطة للغاية وهي في الغالب تغييرات في جودة الحياة تجعل التفاعل مع المحفظة أسهل للقراء.

فهرس z ملاحي

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

محاذاة التعليمات البرمجية

نظرًا لأنني عادةً ما أستخدم فصول "justify-content-center" و "text-center" الخاصة بـ Bootstrap لمحاذاة العناصر ، لا أريد أن ترث الكود الخاص بي تلك الطبيعة المحاذية للمركز. يتم إصلاح هذا بسهولة عن طريق الكتابة فوق أي تغييرات في المحاذاة وجعل علامات التعليمات البرمجية محاذاة إلى اليسار: هذا يحافظ على تباعد علامات الجدولة في التعليمات البرمجية.

الحشو navFix

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

ارتفاع pdf

الارتفاع الافتراضي لملفات pdf صغير بشكل لا يصدق. إنه غير قابل للقراءة بشكل أساسي ، لذلك قمت بتغيير الارتفاع لمحاولة إعطاء مساحة كافية لصفحة واحدة تقريبًا في كل مرة.

الخطوة 4: إطار جافا سكريبت (javascript.js)

/ * * هذا يبحث عن أي عنصر بفئة 'toggle' وإما يخفيه أو يعرضه * / function toggleSection (id، toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id)؛ var divArray = document.getElementsByClassName (toggleID) ،

لـ (var i = 0؛ i <divArray.length؛ i ++) {divArray .style.display = "none"؛ }

divID.style.display = "block" ؛

}

عودة كاذبة؛

}

/*

* الرمز الذي يجب تشغيله بترتيب معين * / $ (المستند). جاهز (الوظيفة () {/ * * تحميل المحتوى من الملفات * /

/*

* فرض تأخيرًا بسيطًا في تحميل البيانات * / setTimeout (الوظيفة () {/ * * قم بتمييز كل الشفرة التي تم تحميلها في * / $ ("الكود المسبق"). كل (وظيفة (i ، كتلة) { hljs.highlightBlock (كتلة) ؛}) ؛} ، 1000) ؛ }) ؛

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

تبديل

لقد استخدمت قيم الفصل لإدارة المحتوى الذي يجب إظهاره أو إخفاؤه لأنني في معظم الأوقات أستخدم divs لفصل العناصر المتعددة وتجميعها معًا. يمكنك استخدام هذا لتجميع الأزرار الفردية معًا أيضًا ، ولكنه يتطلب فحصًا إضافيًا قبل تعيين عرض "الحظر" للسماح بعدم عرض أي محتوى.

تحميل المستند

لقد قمت بتضمين هذا لأنه من الفوضى عمومًا تضمين مجموعة من رموز البرمجة المستقلة في ملفات HTML العادية. يمكننا استخدام طريقة التمييز الديناميكي هذه لإجبار العملية على الحدوث بعد تحميل محتوى من ملفات أخرى.

$ ('# mq2-intro'). تحميل ("files / tutorials / mq2 / mq2-intro / content.html")؛

هذا مثال على كيفية تحميل المحتوى.

الخطوة 5: شريط التنقل

الأحرف الأولى

• الصفحة الرئيسية
• عني
• دروس المشاريع
• اتصل بي

• يعد شريط التنقل هو العنصر الأكثر تعقيدًا من بين كل شيء في الحافظة. إن التركيبة الهائلة من الفصول تجعل الأمر أشبه باللغز الذي يتطلب منك النظر باستمرار في كتاب القواعد.

  وظيفة التمهيد

  يعمل Bootstrap بشكل أساسي من خلال قيم الفئات المختلفة. بالنظر إلى عنصر "nav" نفسه ، ليس من الصعب جدًا التأكد من الغرض من كل فئة:

  "navbar" هو الخيار "md" (متوسط) ، "توسيع" ، "قادر" ، "معتم". وقمنا "بإصلاحه" في "القمة". يبدو الأمر محيرًا لأنه خليط من المعرفات ، ولكن إذا نظرت إليها على أنها صفات للعنصر ، فسيصبح من السهل جدًا فهم ما يحدث.

  ماركة

  العلامة التجارية هي الشعار والاسم المعتاد الذي تراه في كل موقع ويب في أعلى اليسار. إنه عنصر تصميم مجرب وحقيقي يتوقعه كل مستخدم في هذه المرحلة.

  ملاحظة: العلامات "i" هي في الواقع رموز FontAwesome ، وتحصل على هذه العلامات من أي صفحة رمز.

  زر التبديل / للطي (الجوال)

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

  روابط Navbar (الجانب الأيسر)

  تعتمد هذه الروابط كليا على الفئات التي تحتاجها لمحفظتك. لقد قمت بتضمين بعض الأمثلة النموذجية كنقطة بداية ، لكن لا أحد هو نفسه. قد لا تحتاج إلى قسم "البرامج التعليمية" لأنك تركز على صياغة المنحوتات الفنية. يمكن نسخ كل عنصر "li" ولصقه ، لذلك بمجرد معرفة ما تحتاج إليه ، يكون من السهل إعداد التنقل.

  ملاحظة: يمكنك إنشاء قوائم منسدلة تقنيًا ضمن القوائم المنسدلة الأخرى ، لكنني لا أوصي بذلك ما لم تكن على استعداد لإضافة المزيد من CSS و Javascript لجعل الواجهة تبدو نظيفة.

  روابط Navbar (الجانب الأيمن)

  بإعطاء القائمة الصحيحة للروابط فئة "ml-auto" ، يقوم Bootstrap بفصل القائمتين بالتساوي. هذا يخلق تقسيم الجانب الأيسر والأيمن نظيف. قررت استخدام هذه المساحة لروابط الوسائط الاجتماعية لأنها طريقة شائعة وشائعة جدًا لزيادة تواجدك. إذا لم يكن ذلك مناسبًا ، فيمكنك إلغاء هذه الروابط لشريط البحث أو معلومات تسجيل الدخول وما إلى ذلك. ولكن تذكر فقط أنه من المهم استخدام مساحة. وعلى غرار روابط شريط التنقل على الجانب الأيسر ، يمكنك نسخها ولصقها أيضًا.

  ملاحظة: إذا كنت تخطط لاستخدام الروابط التي قمت بإعدادها بالفعل ، فقم بتغيير "اسم المستخدم" في روابط "href" الفعلية نفسها.

  الخطوة 6: الصفحة الرئيسية

  

  

  

  اسمك

  مبرمج كاتب اعب

  سيعتمد هذا القسم وصفحات المحتوى اللاحقة على ما تريد وضعه في محفظتك. من الواضح أنني لا أستطيع معالجة كل نوع من أنواع المحتوى ، لكنني حاولت تضمين الصور وملفات PDF ومقاطع الفيديو وكتل الأكواد وبعض التضمينات النموذجية.

  تنسيق الجدول

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

  أزرار

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

  محتوى كود البرمجة

  تعد علامات "التعليمات البرمجية" هي العلامات الافتراضية التي يستخدمها التحديد js لإدارة جميع عمليات التمييز. إذا كنت تتذكر من ملف javascript.js ، فهناك قسم لتحميل المحتوى من الملفات الأخرى.

  $ ('# home-programmer-macro'). تحميل ("files / home / watchLoot.mac")؛

  • يبحث الجزء الأول من هذا عن "معرف" العنصر الذي تريد إدراج المحتوى فيه.
  • الجزء الثاني هو موقع الملف الذي تريد التحميل فيه.

  ملاحظة: لن يتم تحميل المحتوى بالكامل بالفعل لأن هناك فرصة جيدة لأن تقوم بتحرير صفحة الويب هذه محليًا بدلاً من الخادم. يمكن معالجة هذا من خلال عدد من الطرق المختلفة التي سأتناولها في نهاية Instructable.

  فيديو يوتيوب

  يأتي "iframe" المضمن في الواقع من موقع YouTube نفسه. لن أشرح بالتفصيل كيفية الحصول عليها ، ولكن عندما تذهب إلى "مشاركة" مقطع فيديو ، يوجد خيار "تضمين" سيساعدك على إنشاء الشفرة اللازمة لعرض الفيديو الخاص بك على صفحة الويب.

  الخطوة السابعة: التطلع إلى الأمام

  هناك فرصة جيدة جدًا لأنني لم أقم بتغطية بعض العناصر أو نوع المحتوى الذي تريد تضمينه في موقع الويب الخاص بك. لحسن الحظ ، هناك العديد من الخيارات الجيدة لك لاتخاذ الخطوات التالية بنفسك.

  توثيق Bootstrap

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

  W3Schools

  W3Schools هو موقع رائع حيث يمكنك معرفة أي شيء يتعلق ببرمجة وتطوير الويب. إنها أكثر ذكاءً مني ، وهي تغطي تقريبًا كل وظائف HTML و CSS وجافا سكريبت يمكنك التفكير فيها.

  استضافة محفظتك

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

  جرب واستمتع

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