يقترب

تعرف على المبادئ التوجيهية والاستراتيجيات والتقنيات المستخدمة لإنشاء 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 ، ويوفر متصفحك عمومًا قدرًا كبيرًا من الوظائف لك.

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

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

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

خدمات

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

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

HTML مرن

While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.

Code conventions

Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifices guidelines for general formatting, common sense defaults, property and attribute orders, and more.

We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.

نستخدم vnu-jar لفرض HTML القياسي والدلالي ، بالإضافة إلى اكتشاف الأخطاء الشائعة.