دليل المبتدئين لبناء موقع ويب سريع الاستجابة باستخدام Bootstrap - الجزء 1

تم التحديث الأخير في 5 يونيو 2019

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

ما هو Bootstrap؟

وفقًا لموقع Bootstrap الرسمي (getbootstrap.com) ، فإن "Bootstrap هو أشهر إطار عمل HTML و CSS و JavaScript لتطوير المشروع الأول المتجاوب والمتنقل على الويب". بعبارات أبسط ، يعد Bootstrap إطارًا بسيطًا للغاية للمساعدة في جعل تطوير الويب للواجهة الأمامية أسرع بالإضافة إلى جذب المطورين من مستويات المهارة المختلفة.

لماذا نستخدم Bootstrap؟

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

كيف تبدأ

لبدء استخدام Bootstrap ، يجب عليك زيارة موقع Bootstrap الرسمي (http://getbootstrap.com/). Bootstrap هو مشروع مفتوح المصدر ويتم استضافته وتطويره وصيانته على GitHub ؛ يتيح ذلك للمستخدمين الوصول إلى الكود المصدري وفهم النطاق الكامل لإطار العمل كأداة لبناء مواقع الويب.

هناك ثلاث طرق لتنزيل الإصدار الحالي من Bootstrap (v3.3.6): يمكنك تنزيل إصدار متوافق من Bootstrap ، ويمكنك تنزيل كود مصدر Bootstrap ، ويمكنك نقل إطار Bootstrap من Less إلى Sass. في هذه الحالة ، إذا كنت مبتدئًا ، أقترح فقط تنزيل الإصدار المتوافق من Bootstrap. إذا كنت ترغب في دمج إطار عمل Bootstrap في مشاريع Rails أو Compass أو Sass-only ، فهذا هو الوقت الذي يجب عليك فيه نقل التنزيل من Less إلى Sass.

بمجرد تنزيل ملف Boostrap ، يجب عليك فك ضغط المجلد المضغوط لرؤية هيكل إطار عمل Bootstrap المتوافق. انظر أدناه لمعرفة هيكل الملف:

الآن يمكنك فقط إسقاط هذه الملفات في نظام الملفات الخاص بأي مشروع ويب تعمل عليه والبدء في العمل مع Bootstrap لتصميم وبناء المشروع الذي تريده. لمزيد من المعلومات حول وظائف Bootstrap ، والتي سننتقل إليها في الجزء 2 من هذا المنشور أكثر ، لا تتردد في زيارة موقع getboostrap.com لعرض المكونات وميزات CSS ووظائف JavaScript التي يمكن الوصول إليها باستخدام إطار العمل.

الرسم المتجاوب

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

• أجهزة صغيرة جدًا (الهواتف الذكية <768 بكسل)
• الأجهزة الصغيرة (الأجهزة اللوحية> = 768 بكسل)
• الأجهزة المتوسطة (أجهزة سطح المكتب> = 992 بكسل)
• الأجهزة الكبيرة (أجهزة سطح المكتب> = 1200 بكسل)

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

نظام الشبكة

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

فيما يلي مثال على تدوين لنظام الشبكة:

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

التحديات مع Bootstrap

تكون أحجام ملفات JavaScript و CSS كبيرة عند تنزيل جميع ملفات Bootstrap مباشرة. يمكن أن يؤدي هذا إلى بعض التحديات عند إنشاء صفحة سريعة. هذا لأن جميع الملفات الموجودة في ملفات Bootstrap لا يتم استخدامها بشكل كامل وهذا يمكن أن يعني أن تنزيل البيانات غير الضرورية يمكن أن يكون مشكلة. يمكن أن يؤثر ذلك على تجربة المستخدم ، لذلك لا تتردد في التحقق من ذلك بمزيد من التفصيل من خلال زيارة المنشور ، كيفية استخدام أساسيات Bootstrap لتحسين تجربة المستخدم (https://moz.com/ugc/how-to-use-bootstrap- أساسيات لتحسين تجربة المستخدم).

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

المؤلف: Esme Vazquez، Junior Web Developer

صانع ، فنان ، لاعب ، مبرمج ، مطور ويب ، ومدون ؛ Esme هو منشئ منشور المدونة الأخير Indiellect على موقع مدونة إدارة المحتوى ، Medium. خبرتها الحالية تكمن في تطوير الويب وتطوير الألعاب. إنها تعمل حاليًا وتتدرب على تحسين محركات البحث في That! شركة في ليسبورغ ، فلوريدا كمطور ويب مبتدئ. تطمح إلى صنع ألعاب فيديو في المستقبل تصور جمال الإنسانية. إذا كانت هناك أي أسئلة ، فلا تتردد في التغريد عليها على @ EsmeVazquez18 و / أو إضافتها على LinkedIn.