يقترب

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

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

هل ترى شيئًا لا يبدو صحيحًا ، أو ربما يمكن القيام به بشكل أفضل؟ افتح مشكلة - نود مناقشتها معك.

ملخص

سنغوص في كل من هذه الأمور أكثر طوال الوقت ، ولكن على مستوى عالٍ ، إليك ما يوجه نهجنا.

• يجب أن تكون المكونات سريعة الاستجابة ومتحركة أولاً
• يجب أن تُبنى المكونات بفئة أساسية وأن يتم توسيعها عبر فئات معدِّل
• يجب أن تخضع حالات المكون لمقياس z-index عام
• كلما أمكن ، تفضل تنفيذ HTML و CSS على JavaScript
• كلما أمكن ، استخدم الأدوات المساعدة على الأنماط المخصصة
• كلما أمكن ، تجنب فرض متطلبات HTML الصارمة (محددات الأطفال)

متجاوب

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

عبر Bootstrap ، سترى ذلك بشكل أوضح في استعلاماتنا الإعلامية. في معظم الحالات ، نستخدم min-widthالاستعلامات التي تبدأ في التطبيق عند نقطة توقف معينة وتنتقل عبر نقاط التوقف الأعلى. على سبيل المثال ، .d-noneينطبق a من min-width: 0إلى ما لا نهاية. من ناحية أخرى ، .d-md-noneينطبق أ من نقطة التوقف المتوسطة وما فوق.

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

الطبقات

بصرف النظر عن إعادة التشغيل ، ورقة أنماط التطبيع عبر المستعرضات ، تهدف جميع أنماطنا إلى استخدام الفئات كمحددات. وهذا يعني الابتعاد عن محددات النوع (على سبيل المثال ، input[type="text"]) والفئات الرئيسية الدخيلة (على سبيل المثال .parent .child) التي تجعل الأنماط محددة للغاية بحيث لا يمكن تجاوزها بسهولة.

على هذا النحو ، يجب بناء المكونات باستخدام فئة أساسية تضم أزواج قيمة ملكية مشتركة لا يجب تجاوزها. على سبيل المثال ، .btnو .btn-primary. نستخدمها .btnلجميع الأنماط الشائعة مثل displayو paddingو و border-width. ثم نستخدم معدِّلات مثل .btn-primaryإضافة اللون ولون الخلفية ولون الحدود وما إلى ذلك.

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

موازين z- الفهرس

هناك نوعان من z-indexالمقاييس في Bootstrap - عناصر داخل مكون ومكونات التراكب.

عناصر المكون

• تم تصميم بعض المكونات في Bootstrap باستخدام عناصر متداخلة لمنع الحدود المزدوجة دون تعديل borderالخاصية. على سبيل المثال ، مجموعات الأزرار ومجموعات الإدخال وتقسيم الصفحات.
• z-indexتشترك هذه المكونات في مقياس قياسي من 0خلال 3.
• 0هو الافتراضي (الأولي) ، هو 1/ ، و ، هو .:hover2:active.active3:focus
• يتوافق هذا النهج مع توقعاتنا بأولوية المستخدم القصوى. إذا تم التركيز على عنصر ، فسيكون مرئيًا ولفت انتباه المستخدم. العناصر النشطة هي ثاني أعلى مستوى لأنها تشير إلى الحالة. يعد التمرير ثالث أعلى نسبة لأنه يشير إلى نية المستخدم ، ولكن يمكن تمرير أي شيء تقريبًا.

مكونات التراكب

يتضمن Bootstrap العديد من المكونات التي تعمل كتراكب من نوع ما. يتضمن ذلك ، بالترتيب الأعلى z-index، القوائم المنسدلة ، وأشرطة التنقل الثابتة واللزجة ، والنماذج ، وتلميحات الأدوات ، والقوائم المنبثقة. هذه المكونات لها z-indexمقياسها الخاص الذي يبدأ من 1000. رقم البداية هذا عشوائي ويعمل كمخزن مؤقت صغير بين الأنماط الخاصة بنا والأنماط المخصصة لمشروعك.

يزيد كل مكون من مكونات التراكب من z-indexقيمته بشكل طفيف بحيث تسمح مبادئ واجهة المستخدم الشائعة للعناصر التي تركز على المستخدم أو التي تم تحريكها بالظهور في العرض في جميع الأوقات. على سبيل المثال ، النموذج هو حظر المستندات (على سبيل المثال ، لا يمكنك اتخاذ أي إجراء آخر باستثناء إجراء المشروط) ، لذلك نضع ذلك فوق أشرطة التنقل الخاصة بنا.

تعلم المزيد حول هذا في z-indexصفحة التخطيط لدينا .

HTML و CSS على JS

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

هذا المبدأ هو dataسمات JavaScript API من الدرجة الأولى لدينا. لا تحتاج إلى كتابة أي JavaScript تقريبًا لاستخدام ملحقات JavaScript الإضافية ؛ بدلاً من ذلك ، اكتب HTML. اقرأ المزيد عن هذا في صفحة نظرة عامة على JavaScript .

أخيرًا ، تعتمد أساليبنا على السلوكيات الأساسية لعناصر الويب المشتركة. كلما أمكن ، نفضل استخدام ما يوفره المتصفح. على سبيل المثال ، يمكنك وضع .btnفصل دراسي على أي عنصر تقريبًا ، لكن معظم العناصر لا توفر أي قيمة دلالية أو وظيفة متصفح. لذا بدلاً من ذلك ، نستخدم <button>s و <a>s.

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

خدمات

تعد فئات الأدوات المساعدة - التي كانت تُعرف سابقًا بالمساعدين في Bootstrap 3 - حليفًا قويًا في مكافحة انتفاخ CSS وضعف أداء الصفحة. عادةً ما تكون فئة المنفعة عبارة عن اقتران واحد غير قابل للتغيير لقيمة الملكية معبرًا عنه كفئة (على سبيل المثال ، .d-blockيمثل display: block;). جاذبيتها الأساسية هي سرعة الاستخدام أثناء كتابة HTML والحد من مقدار CSS المخصص الذي يجب عليك كتابته.

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

HTML مرن

على الرغم من أن ذلك ليس ممكنًا دائمًا ، إلا أننا نسعى جاهدين لتجنب الإفراط في التشدد في متطلبات HTML الخاصة بنا للمكونات. وبالتالي ، فإننا نركز على الفصول الفردية في محددات CSS الخاصة بنا ونحاول تجنب محددات الأطفال الفورية ( >). يمنحك هذا مزيدًا من المرونة في التنفيذ ويساعد في الحفاظ على CSS أبسط وأقل تحديدًا.