المنهجيّة المتّبعة في تطوير Bootstrap
تعرَّف على المبادئ التوجيهيّة والإستراتيجيّات والتقنيّات المستخدَمة لبناء إطار العمل Bootstrap وصيّانته بحيث تستطيع تخصيصه أكثر وتمديده بنفسك.
تركّز هذه الصفحة، بخلاف صفحات البداية في هذا التوثيق والتي عرضت مقدِّمة عامّة عن المشروع وما يوفّره، تركّز على السبب الذي جعل فريق التطوير يعتمد طريقة التطوير التي اعتمدها؛ وتشرح فكرة المشروع القائمة على البناء على ما توفّره تقنيّات الويب بحيث يمكن للآخرين التعلّم من طريقة التطوير، والمساهمة في المشروع والمساعدة على تحسينه.
يمكن فتح علّة على GitHub عند ملاحظة أمر لا يعمل كما ينبغي في إطار العمل Bootstrap أو يمكن تحسينه.
خلاصة
في ما يلي الخطوط العامّة التي وجَّهت عمليّة تطوير إطار العمل Bootstrap في إصداره الرابع:
- يجب أن تكون المكوِّنات متجاوبة وموَّجهة للجوّال أولًا.
- يجب أن تُبنَى المكوِّنات على أساس صنف قاعدي تُمدِّده أصناف معدِّلة.
- يجب أن تخضَع حالات المكوِّن لسلَّم
z-indexمشترك. - يُفضَّل تنفيذ التصميم باستخدام HTML و CSS دون JavaScript كلّ ما كان ذلك ممكنًا.
- يُفضَّل استخدام الأدوات (الأصناف الخدميّة) بدلًا من التنسيقات الخاصّة كلّ ما كان ذلك ممكنًا.
- ينبغي تجنّب فرض متطلّبات HTML صارمة (محدِّدات الأبناء) كلّ ما كان ذلك ممكنًا.
التجاوب
تُنشَأ أنماط Bootstrap لتكون متجاوبة، وهي مقاربة توصَف عادة بأنّها موجَّهة للجوّال أولًا (mobile-first). يُستخدَم هذا المُصطلَح في توثيق Bootstrap بنفس المعنى، إلّا أنّه قد يكون أحيانًا فضفاضًا جدّا. على الرغم من أنّه لا يتوجَّب على كلّ مكوِّن في Bootstrap أن يكون متجاوبًا تمامًا، إلّا أنّ مقاربة التجاوب هنا هي الحدّ من إعادة كتابة شيفرات CSS بدفع مستخدمي إطار العمل لإضافة أنماط مع ازدياد إطار العرض.
يتّضح هذا الأمر أكثر في استعلامات الوسائط. يستخدم إطار العمل غالبًا استعلامات min-width يبدأ مفعولها عند نقطة حدّيّة معيَّنة ويتنقّل إلى النقاط الحديّة العليا. على سبيل المثال، ينطبق الصنف .d-none من min-width: 0 إلى ما لا نهاية؛ في حين ينطبق الصنف .d-md-none من النقطة الحديّة المتوسّطة فأعلى.
تُستخدَم أحيانًا الخاصيّة max-width عندما يتطلّب تعقيد وظيفة المكوِّن ذلك. تكون إعادة الكتابة هذه أوضح وظيفيًّا وعقليًّا في تنفيذها من كتابة جوهر الوظيفة باستخدام المكوِّنات الأخرى. يبذل مطوِّرو Bootstrap ما في وسعهم لتفادي هذه الطريقة، إلّا أنّهم يستخدمونها من حين لآخر.
الأصناف
تهدف جميع الأنماط في إطار العمل Bootstrap، ما عدا تنسيقات Reboot التي هي ورقة أنماط لتطبيع تنسيقات عابرة للمتصفّحات، تهدف إلى استخدام الأصناف لتحديد العناصر. يعني هذا التخلّي عن محدِّدات الأنواع (مثل input[type="text"]) والأصناف الآباء الدخيلة (مثلًا .parent .child)
يجب أن تُبنى المكوِّنات، من هذا المنطلق، بصنف قاعديّ يحوي خاصيّات وقيّمًا مشتركة معدَّة لكي لا يُبطَل مفعولها (لا تُعاد كتابتها). الصنفان .btn و.btn-primary مثال على هذه النقطة. يُستخدَم الصنف .btn للأنماط المشتركة مثل العرض (display)، والحاشيّة (padding) وعرض الإطار (border-width). ثم تأتي الأصناف المعدِّلة - مثل .btn-primary - لإضافة لون الخطّ، ولون الخلفيّة، ولون الإطار وغيرها.
يجب ألا تُستخدَم الأصناف المعدِّلة إلّا إذا كانت هناك خاصيّات أو قيّم عدّة يُرغَب في تغييرها عبر تنويعات متعدِّدة. ليس المعدِّلات ضروريّة دائمًا، لذا تأكّد عند إنشائها من أنّك فعلًا تقتصد في أسطُر الشفرة وتحول دون إعادة الكتابة غير الضروريّة. أصناف ألوان القالب وتنويعات الحجم أمثلة جيِّدة على الأصناف المعدِّلة.
مستويات z-index
يوجَد مستويا z-index في إطار العمل Bootstrap: العناصر ضمن مكوِّن والطبقات الشفّافة (overlay).
عناصر المكوِّنات
- تُنشَأ بعضٌ من مكوِّنات Bootstrap بعناصر متراكبة (overlapping) لمنع تكرار الإطارات دون تغيير الخاصيّة
border. على سبيل المثال، مجموعات الأزرار، ومجموعات الإدخال وترقيم الصفحات. - تشترك هذه المكوِّنات في سُلَّم
z-indexمن0إلى3. - الدرجة
0في السلَّم هي القيمة المبدئيّة (الابتدائيّة)، والدرجة1للخاصيّة:hover، و2الخاصيّة:activeأو الصنف.active، و3للخاصيّة:focus. - تطابق هذه المقاربة توقّعاتنا بخصوص الأولويّة القصوى للمستخدِم. عند التركيز على عنصُر (
:focus) فهذا يعني أنه مرئي ويحوز انتباه المستخدم. تأتي العناصر النشطة (.activeأو:active) ثانيّة في الأولويّة لأنّها تشير لحالة. يلي ذلك الحومان (:hover) في المرتبة الثالثة لأنّه يشير إلى نيّة مستخدم؛ يمكن تقريبًا الحومان على كلّ شيء.
الطبقات الشفّافة
يحوي إطار العمل Bootstrap مكوِّنات عديدة تعمل كطبقة شفّافة. يتعلَّق الأمر بالمكوِّنات التاليّة (مرتَّبة تصاعديًّا حسب قيمة z-index): القوائم المنسدلة، وشرائط التنقّل المثبَّّتة واللاصقة، والنوافذ الشرطيّة، والتلميحات والعناصر المنبثقة. لدى هذه المكوِّنات سلَّم درجات z-index خاصّ بها يبدأ من القيمة 1000. اختيرت هذه القيمة المبدئيّة عشوائيًّا، وتهدف لأن تكون حافظة صغيرة بين أنماط إطار العمل والأنماط المُخصَّصة لمشروعك.
يزيد كلّ مكوِّن بطبقة شفّافة قيمة z-index قليلًا بحيث تُحتَرَم مبادئ تجربة المستخدم المتعارف عليها والتي تسمح للعناصر التي يركّز عليها المستخدم أو يحوم فوقها بالبقاء دائمًا في مجال الرؤية. النوافذ الشرطيّة - على سبيل المثال - تحجب المستند (لا يمكن تنفيذ إجراءات أخرى غير إجراء النافذة الشرطيّة)؛ لذا فإنها تكون فوق شرائط التنقّل.
راجع هذه الصفحة للمزيد عن الخاصيّة z-index.
أولويّة HTML و CSS على JavaScript
يُفضِّل مطوِّرو Bootstrap كتابة شفرات HTML و CSS بدلًا من JavaScript كلّ ما أمكن ذلك. عمومًا تكون HTML و CSS أكثر إنتاجيّة وأسهل للكثير من الأشخاص من جميع الخبرات. علاوةً على ذلك، ينفّذ المتصفّح شفرات HTML و CSS أسرع من شفرات JavaScript.
هذا المبدأ هو الداعي لوجود خاصيّات البيانات (data) للتخاطب مع واجهة تطبيقات JavaScript باستخدام خاصيّات HTML. لن تحتاج تقريبًا لكتابة أي شفرة JavaScript لاستخدام مُلحقات JavaScript التي يتوفّر عليها إطار العمل Bootstrap. اقرأ توثيق خاصيّات البيانات للمزيد من المعلومات.
تُبنَى أنماط Bootstrap على السلوك القاعديّ لعناصر الويب الشائعة، لذا يُفضَّل دائمًا استخدامُ ما يوفّره المتصفّح كلّ ما كان ذلك ممكنا. يمكن - على سبيل المثال - تطبيق الصنف .btn على أي عنصُر HTML تقريبًا، إلّا أنّ أغلب العناصر لا توفّر أي قيمة دلاليّة للصنف أو وظيفة في المتصفّح. لذا يُستخدَم الصنف مع العنصريْن <button> و .
ينطبق الأمر كذلك على المكوِّنات المعقَّدة. على الرغم من أنّه تمكن كتابة ملحق خاصّ للتصديق على الاستمارات لإضافة أصناف إلى العنصُر الأب اعتمادًا على حالة حقل الإدخال، وبالتالي يمكن تنسيق النصّ - مثلًا - باللون الأحمر؛ إلّا أنّ مطوِّري Bootstrap يفضّلون استخدام الصنفيْن الزائفيْن :valid و :invalid اللذيْن يتوفّر عليهما كلّ متصفّح.
الأدوات
الأدوات - المعروفة سابقًا بالمساعِدات (helpers) في الإصدار 3 - هي وسيلة فعّالة للحؤول دون تضخّم أنماط CSS ومشاكل الأداء في صفحات الويب. الأداة (الصنف الخدمي) هي عادة زوج خاصيّة-قيمة لا يمكن التعديل عليه ويُعبَّر عنه بصنف CSS (.d-block تعني مثلًا display: block;). تهدف الأدوات أساسًا إلى أن تكون سريعة الاستخدام عند كتابة شفرات HTML وتحدّ من أنماط CSS المُخصَّصة المطلوب كتابتها.
في ما يتعلَّق بالأنماط المخصَّصة، يمكن للأدوات أن تساعد في مكافحة ازديّاد أحجام الملفّات باختصار أزواج الخاصيّات والقيّم في أصناف منفردة. يمكن أن ينتُج عن هذا الأمر تأثير كبير عند تمدّد المشروع.
شفرات HTML مرنة
يعمل مطوّرو Bootstrap جاهدين على تفادي التخصيص المبالغ فيه في عناصر HTML المطلوبة للمكوِّنات، على الرغم من أنّ ذلك لا يكون ممكنًا دائما. من هذا المنطلق تركّز محدِّدات CSS على الأصناف المنفردة وتحاول تجنّب محدِّدات الأبناء المباشرين (<). يمنحك هذا الأمر مرونة أكبر في التنفيذ ويساعد في الإبقاء على شفرات CSS أيسر وأقلّ تحديدًا.