عرض مصدر Bootstrap/extend

<noinclude>{{DISPLAYTITLE:المنهجيّة المتّبعة في تطوير Bootstrap}}</noinclude>
[[تصنيف:Bootstrap]]
تعرَّف على المبادئ التوجيهيّة والإستراتيجيّات  والتقنيّات المستخدَمة لبناء إطار العمل Bootstrap وصيّانته بحيث تستطيع تخصيصه أكثر وتمديده بنفسك.

تركّز هذه الصفحة، بخلاف صفحات البداية في هذا التوثيق والتي عرضت  مقدِّمة عامّة عن المشروع وما يوفّره،  تركّز على ''السبب'' الذي جعل فريق التطوير يعتمد طريقة التطوير التي اعتمدها؛ وتشرح فكرة المشروع القائمة على البناء على ما توفّره تقنيّات الويب بحيث يمكن للآخرين التعلّم من طريقة التطوير، والمساهمة في المشروع والمساعدة على تحسينه.

يمكن فتح علّة على Github عند ملاحظة أمر لا يعمل كما ينبغي في إطار العمل Bootstrap أو يمكن تحسينه.

== خلاصة ==
في ما يلي الخطوط العامّة التي وجَّهت عمليّة تطوير إطار العمل Bootstrap في إصداره الرابع:
* يجب أن تكون المكوِّنات متجاوبة وموَّجهة للجوّال أولا.
* يجب أن تُبنَى المكوِّنات على أساس صنف قاعدي تُمدِّده أصناف معدِّلة.
* يجب أن تخضَع حالات المكوِّن لسلَّم z-index مشترك.
* يُفضَّل تنفيذ التصميم باستخدام HTML وCSS دون Javascript كلّ ما كان ذلك ممكنا.
* يُفضَّل استخدام الأدوات (الأصناف الخدميّة) بدلًا من التنسيقات الخاصّة كلّ ما كان ذلك ممكنا.
* ينبغي تجنّب فرض متطلّبات HTML صارمة (محدِّدات الأبناء) كلّ ما كان ذلك ممكنا.

== التجاوب ==
تُنشَأ أنماط Bootstrap لتكون متجاوبة، وهي مقاربة توصَف عادة بأنّها ''موجَّهة للجوّال أولا''. يُستخدَم هذا المُصطلَح في توثيق Bootstrap بنفس المعنى، إلّا أنّه قد يكون أحيانًا فضفاضًا جدّا. على الرغم من أنّه ''لا يتوجَّب'' على كلّ مكوِّن في Bootstrap أن يكون متجاوبًا تمامًا، إلّا أنّ مقاربة التجاوب هنا هي الحدّ من إعادات كتابة شفرات CSS بدفع مستخدمي إطار العمل لإضافة أنماط مع ازدياد إطار العرض.

يتّضح هذا الأمر أكثر في استعلامات الوسائط. يستخدم إطار العمل غالبًا استعلامات <code>min-width</code> يبدأ مفعولها عند نقطة حدّيّة معيَّنة ويتنقّل إلى النقاط الحديّة العليا. على سبيل المثال، ينطبق الصنف <code>‎.d-none</code> من <code>min-width: 0</code> إلى ما لا نهاية؛ في حين ينطبق الصنف <code>‎.d-md-none</code> من النقطة الحديّة المتوسّطة فأعلى.

تُستخدَم أحيانًا الخاصيّة <code>max-width</code> عندما يتطلّب تعقيد وظيفة المكوِّن ذلك. تكون إعادة الكتابة هذه أوضح وظيفيًّا وعقليًّا في تنفيذها من كتابة جوهر الوظيفة باستخدام المكوِّنات الأخرى. يبذل مطوِّرو Bootstrap ما في وسعهم لتفادي هذه الطريقة، إلّا أنّهم يستخدمونها من حين لآخر.

== الأصناف ==
تهدف جميع الأنماط في إطار العمل Bootstrap، ما عدا تنسيقات Reboot التي هي ورقة أنماط لتطبيع تنسيقات عابرة للمتصفّحات، تهدف إلى استخدام الأصناف لتحديد العناصر. يعني هذا التخلّي عن محدِّدات الأنواع (مثل <code>input[type="text"]</code>) والأصناف الآباء الدخيلة (مثلًا <code>‎.parent .child</code>)

يجب أن تُبنى المكوِّنات، من هذا المنطلق، بصنف قاعديّ يحوي خاصيّات وقيّمًا مشتركة معدَّة لكي لا يُبطَل مفعولها (لا تُعاد كتابتها). الصنفان <code>‎.btn</code> و<code>‎.btn-primary</code> مثال على هذه النقطة. يُستخدَم الصنف <code>‎.btn</code> للأنماط المشتركة مثل العرض (<code>display</code>)، والحاشيّة (<code>padding</code>) وعرض الإطار (<code>border-width</code>). ثم تأتي الأصناف المعدِّلة - مثل <code>‎.btn-primary</code> - لإضافة لون الخطّ، ولون الخلفيّة، ولون الإطار وغيرها.

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

== مستويات z-index ==
يوجَد مستويا <code>z-index</code> في إطار العمل Bootstrap: العناصر ضمن مكوِّن والطبقات الشفّافة Overlay.

=== عناصر المكوِّنات ===
* تُنشَأ بعضٌ من مكوِّنات Bootstrap بعناصر متراكبة Overlapping لمنع تكرار الإطارات دون تغيير الخاصيّة <code>border</code>. على سبيل المثال، مجموعات الأزرار، ومجموعات الإدخال وترقيم الصفحات.
* تشترك هذه المكوِّنات في سُلَّم <code>z-index</code> من <code>0</code> إلى <code>3</code>.
* الدرجة <code>0</code> في السلَّم هي القيمة المبدئيّة (الابتدائيّة)،  والدرجة <code>1</code> للخاصيّة  <code>‎:hover</code>، و<code>2</code> الخاصيّة  <code>‎:active</code> أو الصنف <code>‎.active</code>، و<code>3</code> للخاصيّة <code>‎:focus</code>.
* تطابق هذه المقاربة توقّعاتنا بخصوص الأولويّة القصوى للمستخدِم. عند التركيز على عنصُر (<code>‎:focus</code>) فهذا يعني أنه مرئي ويحوز انتباه المستخدم. تأتي العناصر النشطة (<code>‎.active</code> أو <code>‎:active</code>) ثانيّة في الأولويّة لأنّها تشير لحالة. يلي ذلك الحومان (<code>‎:hover</code>) في المرتبة الثالثة لأنّه يشير إلى نيّة مستخدم؛ يمكن تقريبًا الحومان ''على كلّ شيء''.

=== الطبقات الشفّافة ===
يحوي إطار العمل Bootstrap مكوِّنات عديدة تعمل كطبقة شفّافة. يتعلَّق الأمر بالمكوِّنات التاليّة (مرتَّبة تصاعديًّا حسب قيمة <code>z-index</code>): القوائم المنسدلة، وشرائط التنقّل المثبَّّتة واللاصقة، والنوافذ الشرطيّة، والتلميحات والعناصر المنبثقة. لدى هذه المكوِّنات سلَّم درجات <code>z-index</code> خاصّ بها يبدأ من القيمة <code>1000</code>. اختيرت هذه القيمة المبدئيّة عشوائيًّا، وتهدف لأن تكون حافظة صغيرة بين أنماط إطار العمل والأنماط المُخصَّصة لمشروعك.

يزيد كلّ مكوِّن بطبقة شفّافة قيمة <code>z-index</code> قليلًا بحيث تُحتَرَم مبادئ تجربة المستخدم المتعارف عليها والتي تسمح للعناصر التي يركّز عليها المستخدم أو يحوم فوقها بالبقاء دائمًا في مجال الرؤية. النوافذ الشرطيّة Modals - على سبيل المثال - تحجب المستند (لا يمكن تنفيذ إجراءات أخرى غير إجراء النافذة الشرطيّة)؛ لذا فإنها تكون فوق شرائط التنقّل.

راجع [[Bootstrap/layout overview#z-index|هذه الصفحة]] للمزيد عن الخاصيّة <code>z-index</code>.

== أولويّة HTML وCSS على JavaScript ==
يُفضِّل مطوِّرو Bootstrap كتابة شفرات HTML وCSS بدلًا من JavaScript كلّ ما أمكن ذلك.عموما HTML وCSS أكثر إنتاجيّة وأسهل للكثير من الأشخاص من جميع الخبرات. علاوةً على ذلك، ينفّذ المتصفّح شفرات HTML وCSS أسرع من شفرات JavaScript.

هذا المبدأ هو الداعي لوجود خاصيّات البيانات (<code>data</code>) للتخاطب مع واجهة تطبيقات JavaScript باستخدام خاصيّات HTML. لن تحتاج تقريبًا لكتابة أي شفرة JavaScript لاستخدام مُلحقات JavaScript التي يتوفّر عليها إطار العمل Bootstrap. اقرأ [[Bootstrap/javascript#.D8.AE.D8.A7.D8.B5.D9.8A.D9.91.D8.A7.D8.AA .D8.A7.D9.84.D8.A8.D9.8A.D8.A7.D9.86.D8.A7.D8.AA|توثيق خاصيّات البيانات]] للمزيد من المعلومات.

تُبنَى أنماط Bootstrap على السلوك القاعديّ لعناصر الويب الشائعة، لذا يُفضَّل دائمًا استخدامُ ما يوفّره المتصفّح كلّ ما كان ذلك ممكنا. يمكن - على سبيل المثال - تطبيق الصنف <code>.btn</code> على أي عنصُر HTML تقريبًا، إلّا أنّ أغلب العناصر لا توفّر أي قيمة دلاليّة للصنف أو وظيفة في المتصفّح. لذا يُستخدَم الصنف مع العنصريْن <code><button></code> و<code><a></code>.

ينطبق الأمر كذلك على المكوِّنات المعقَّدة. على الرغم من أنّه ''تمكن'' كتابة ملحق خاصّ للتصديق على الاستمارات لإضافة أصناف إلى العنصُر الأب اعتمادًا على حالة حقل الإدخال، وبالتالي يمكن تنسيق النصّ - مثلًا - باللون الأحمر؛ إلّا أنّ مطوِّري Bootstrap يفضّلون استخدام الصنفيْن الزائفيْن <code>‎:valid</code>و<code>‎:invalid</code> اللذيْن يتوفّر عليهما كلّ متصفّح.

== الأدوات ==
الأدوات - المعروفة سابقًا بالمساعِدات Helpers في الإصدار 3 - هي وسيلة فعّالة للحؤول دون تضخّم أنماط CSS ومشاكل الأداء في صفحات الويب. الأداة (الصنف الخدمي) هي عادة زوج خاصيّة-قيمة لا يمكن التعديل عليه ويُعبَّر عنه بصنف CSS (<code>‎.d-block</code> تعني مثلًا <code>display: block;‎</code>). تهدف الأدوات أساسًا إلى أن تكون سريعة الاستخدام عند كتابة شفرات HTML وتحدّ من أنماط CSS المُخصَّصة المطلوب كتابتها.

في ما يتعلَّق بالأنماط المخصَّصة، يمكن للأدوات أن تساعد في مكافحة ازديّاد أحجام الملفّات باختصار أزواج الخاصيّات والقيّم في أصناف منفردة. يمكن أن ينتُج عن هذا الأمر تأثير كبير عند تمدّد المشروع.

== شفرات HTML مرنة ==
يعمل مطوّرو Bootstrap جاهدين على تفادي التخصيص المبالغ فيه في عناصر HTML المطلوبة للمكوِّنات، على الرغم من أنّ ذلك لا يكون ممكنًا دائما. من هذا المنطلق تركّز محدِّدات CSS على الأصناف المنفردة وتحاول تجنّب محدِّدات الأبناء المباشرين (<code>~</code>). يمنحك هذا الأمر مرونة أكبر في التنفيذ ويساعد في الإبقاء على شفرات CSS أيسر وأقلّ تحديدا.

== مصادر ==
* [https://getbootstrap.com/docs/4.0/extend/approach/ صفحة Approach في توثيق Bootstrap].