ميزات Bootstrap

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

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

ميزات Bootstrap

لفهم ميزات Bootstrap ، نحتاج إلى فهمها النقلة النوعية في تصميم مواقع الويب.

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

من حيث المبدأ ، تم اعتماد النهج التالية:

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

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

ميزة إضافية لاستخدام Bootstrap تتعلق بحقيقة ذلك تعطي Google الأولوية للمواقع المتوافقة مع الجوّال في عمليات البحث التي تجريها.

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

Bootstrap هو إطار عمل يجمع بين عناصر نمط CSS وبرمجة Javascript للتحكم في العرض وإعطاء التفاعل لجميع مكونات الصفحة التي تم تطويرها في HTML5.

من بين الأشياء التي يمكننا التحكم فيها باستخدام Bootstrap:

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

في المقالة التالية سنرى بعض الأمثلة العملية على استخدامه.