أهم 25 سؤالاً وأجوبة لمقابلة Bootstrap [للمستجدين وذوي الخبرة]

إذا كنت مطور ويب للجوال ، فمن المحتمل أنك سمعت بالفعل عن Bootstrap وأهميته في بناء واجهة مستخدم سريعة الاستجابة وذات تصميم جمالي. من أولويات كل شركة اليوم تقديم واجهة مستخدم سهلة الاستخدام ومرنة وتجربة مستخدم (UI / UX). و Bootstrap يساعدك على القيام بذلك!

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

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

أفضل 25 سؤالاً وأجوبة مقابلة Bootstrap

السؤال 1: ما هو Bootstrap؟

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

السؤال 2: ما هي المكونات الرئيسية لـ Bootstrap؟

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

فيما يلي المكونات الرئيسية لـ Bootstrap:

1. JS Plugins: هذا هو المكان الذي توجد فيه ملحقات JS و jQuery
2. التخصيص: تستخدم لتخصيص الأطر
3. CSS: يتضمن ملفات CSS
4. السقالات: تحتوي على نظام شبكي وأنماط خلفية وما إلى ذلك

السؤال 3: ما الذي يجعل Bootstrap خيارًا فعالاً لتطوير الأجهزة المحمولة والويب؟

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

السؤال 4: ما هي الميزات المختلفة لـ Bootstrap؟

فيما يلي بعض ميزات Bootstrap:

- منصة مجانية مفتوحة المصدر ؛ يسمح للمطورين بالمساهمة في تحسينه.

- Bootstrap سريع وسريع الاستجابة وسهل الاستخدام للغاية

- متوافق للاستخدام مع جميع المتصفحات

- يحتوي Bootstrap على مكتبة غنية من التصاميم والقوالب للاختيار من بينها

السؤال 5: ما هي Glyphicons؟

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

صيغة استخدام هذه الحروف الرسومية هي:

<p> <span class = “glyphicons glyphicon-pencil”> </span> </p>

السؤال 6: شرح القوائم المنسدلة ومجموعات الأزرار في Bootstrap.

القائمة المنسدلة هي قائمة تبديل ديناميكية تحتوي على قائمة بالعناصر المرتبطة تحتها. إنه أحد أنظف عناصر تصميم موقع الويب.

بناء الجملة لاستخدام هذه القوائم المنسدلة هو:

<div class = “المنسدلة”> <! - اجعل قائمتك في هذا الفصل مع القائمة المنسدلة للفصل -> </div>

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

بناء الجملة كما يلي:

<div class = “btn-group”> <button class = “btn”> تصحيح </ زر> </div>

<div class = “btn-group”> <button class = “btn”> خطأ </ زر> </ div>

باستخدام المكونين أعلاه ، يمكنك إنشاء مكون جديد يسمى Button Dropdown والذي سيمكنك من تشغيل قائمة منسدلة باستخدام عنصر زر.

بناء الجملة:

<button class = “btn-default dropdown-toggle”> <! - ينتقل مكون القائمة المنسدلة هنا -> </button>

السؤال 7: ما هي مجموعات الإدخال؟

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

يتم استخدام فئة .input-group وفئة .input-group-addon معًا لتنفيذ مجموعة الإدخال.

بناء الجملة:

<div class = ”input-group”>

<span class = ”input-group-addon” id = ”basic-addon1 ″> @ </span>

<input type = ”text” class = ”form-control” placeholder = ”Username” aria-descriptionby = ”basic-addon1 ″>

</div>

السؤال 8: ما هي الفئات السياقية الأربعة لاستخدامها مع شريط Bootstrap التقدمي.

فيما يلي الفئات السياقية الأربعة المستخدمة مع شريط Bootstrap التقدمي:

1. التقدم والنجاح
2. معلومات التقدم
3. التقدم التحذير
4. خطر التقدم

السؤال 9: كم عدد أنماط الأزرار المختلفة الموجودة في Bootstrap؟ ما هم؟

هناك 7 أنماط مختلفة يمكن استخدام زر Bootstrap فيها. وهم على النحو التالي:

1. .btn-info
2. .btn- تحذير
3. .btn-خطر
4. نجاح .btn
5. .btn-link
6. .btn الأساسي
7. .btn- افتراضي

السؤال 10: شرح تنبيهات Bootstrap.

تُستخدم تنبيهات Bootstrap في إنشاء رسائل التنبيه المفترضة. يتم ذلك بشكل أساسي لتصميم الرسائل بحيث تظهر بشكل ملحوظ للمستخدم.

فيما يلي الفئات الأربع في التنبيهات:

1. .alert-Success
2. .alert-info
3. .alert-Warning
4. .alert-خطر.

السؤال 11: كيف تقوم بإنشاء نموذج عمودي أو أساسي في Bootstrap؟

فيما يلي خطوات إنشاء نموذج أساسي عمودي في Bootstrap:

الخطوة 1: إلى العنصر الأصل <form> ، أضف نموذج دور.

الخطوة 2: أضف تسميات وعناصر تحكم داخل <div> باستخدام class.form-group

الخطوة 3: أضف فئة .form-control إلى كل عنوان URL للنص <input> ، وجميع عناصر <textarea> وكذلك <select>.

السؤال 12: ما هو ترقيم الصفحات في Bootstrap؟

كما يوحي التصنيف ، يسمح لك ترقيم الصفحات بتقسيم محتويات موقع الويب الخاص بك إلى صفحات مختلفة لتسهيل التنقل.

بناء الجملة:

<ul class = “pagination”> <! - تظهر عناصر القائمة هنا -> </ul>

السؤال 13: ما هي حاوية Bootstrap؟

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

اقرأ أيضًا Bootstrap مقابل واجهة المستخدم المادية

السؤال 14: اذكر أي ثلاثة مكونات من Bootstrap.

1. Navbar: يعمل كرأس للتنقل على موقع الويب الخاص بك

بناء الجملة: <nav class = “navbar”> <! - كود عناصر التنقل الخاصة بك في DOM -> </nav>

2. Jumbotron: يتصرف مثل منفذ العرض ؛ يمكن أن تفترض وضع ملء الشاشة للتركيز على محتوى رئيسي

بناء الجملة: <div class = “jumbotron”> <! - اكتب المحتوى الخاص بك داخل عناصر DOM هنا -> </div>

3. أشرطة التقدم: تعرض الملاحظات التي تسلط الضوء على تقدم الإجراء

بناء الجملة: <div class = "progress-bar" role = "progressbar" aria-valuenow = "60 ″ aria-valuemin =" 0 ″ aria-valuemax = "100 ″ style =" width: 60٪؛ ">

السؤال 15: ما هما نوعان من التخطيطات في Bootstrap؟

1. تخطيط السوائل
2. تخطيط ثابت

السؤال 16: ما هو تخطيط السوائل؟

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

السؤال 17: ما هو التخطيط الثابت؟

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

السؤال 18: ما هو البرنامج المساعد مشروط في Bootstrap؟

تُعرف النافذة الموروثة الموضوعة كطبقة فوق النافذة الأصلية باسم النافذة المشروطة. تضيف هذه النافذة قيمة إلى تجربة المستخدم من خلال جعلها عملية. يسمى المكون الإضافي المستخدم لإنشاء نوافذ مشروطة بالمكوِّن الإضافي الشرطي.

السؤال 19: ما هي عناصر انهيار Bootstrap؟

يمكنك طي أي عنصر Bootstrap بدون تعليمات JavaScript البرمجية. يمكن القيام بذلك عن طريق إضافة data-toggle = ”collapse” إلى عنصر التحكم. يتم تضمين هدف البيانات أيضًا لمنحه التحكم في تصغير العنصر.

لاستخدام ميزة Bootstrap هذه ، استخدم طي (خيارات).

السؤال 20: تحديد التمهيد جيدا؟

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

السؤال 21: ما هو المكون الإضافي الدائري في Bootstrap.

يتيح لك المكون الإضافي Carousel إنشاء منزلقات على صفحات الويب الخاصة بك. تسمح أشرطة التمرير بترك كتل كبيرة من المحتويات في مساحة صغيرة على الصفحة.

بعض المكونات الإضافية الدائرية التي يمكنك استخدامها هي:

.carousel (خيارات)

.carousel ("إيقاف مؤقت")

.carousel (دورة ")

.carousel ("prev")

.carousel ("التالي")

السؤال 22: اشرح ناتج الكود التالي.

<div class = ”progress”>

<div class = "progress-bar progress-bar-success" style = "width: 65٪">

<span class = ”sr-only”> اكتمل 75٪ بنجاح </ span>

</div>

<div class = "progress-bar progress-bar-warning" style = "width: 20٪">

<span class = ”sr-only”> 30٪ مكتمل مع وجود تحذيرات </ span>

</div>

<div class = "progress-bar progress-bar-خطر" style = "width: 15٪">

<span class = ”sr-only”> 15٪ لم يكتمل </ span>

</div>

</div>

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

السؤال 23: هل تحدد الأكواد المستخدمة لعرض الكود في Bootstrap؟

الإجابة: هناك نوعان من الرموز المستخدمة لعرض الكود. هم انهم:

1. علامة <code>
2. علامة <pre>

السؤال 24: اشرح التطبيع في Bootstrap.

يُعد تطبيع Bootstrap ميزة في Bootstrap يتم من خلالها استخدام ملف CSS صغير لزيادة التناسق عبر المستعرضات.

السؤال 25: ما هي طريقة تخصيص روابط ترقيم الصفحات في Bootstrap؟

استخدم .disabled للارتباطات غير القابلة للنقر واستخدم .active للإشارة إلى الصفحة الحالية.

الخروج: Bootstrap مقابل واجهة المستخدم المادية

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

خاتمة

نأمل أن تساعدك هذه الأسئلة والأجوبة في تحسين معرفتك بـ Bootstrap. حظا سعيدا في تلك المقابلة!

إذا كنت مهتمًا بمعرفة المزيد حول تطوير البرامج كاملة المكدس ، فتحقق من برنامج upGrad & IIIT-B's Executive PG في تطوير البرامج الكامل المكدس المصمم للمهنيين العاملين ويقدم أكثر من 500 ساعة من التدريب الصارم و 9+ مشاريع و المهام ، وحالة خريجي IIIT-B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.