مساهمة (Contribute)

ساعد في تطوير Bootstrap من خلال سكربتات بناء المستندات والاختبارات الخاصة بنا.

في هذه الصفحة

إعداد الأدوات (Tooling setup)

تستخدم Bootstrap npm scripts لبناء المستندات وتجميع ملفات المصدر. يحتوي ملف package.json الخاص بنا (https://github.com/twbs/bootstrap/blob/v5.3.8/package.json) على هذه السكربتات لتجميع الكود، وتشغيل الاختبارات، والمزيد. هذه السكربتات غير مخصصة للاستخدام خارج المستودع والمستندات الخاصة بنا.

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

تحميل وتثبيت Node.js، والتي نستخدمها لإدارة التبعيات الخاصة بنا.
إما تحميل مصادر Bootstrap أو عمل fork وعمل clone لـ مستودع Bootstrap.
انتقل إلى المجلد الرئيسي /bootstrap وقم بتشغيل npm install لتثبيت التبعيات المحلية المدرجة في package.json.

عند الاكتمال، ستتمكن من تشغيل الأوامر المختلفة المقدمة من سطر الأوامر.

استخدام npm scripts

يحتوي ملف package.json الخاص بنا على العديد من المهام لتطوير المشروع. قم بتشغيل npm run لرؤية جميع الـ npm scripts في الطرفية الخاصة بك. تشمل المهام الأساسية ما يلي:

المهمة	الوصف
`npm start`	يقوم بتجميع CSS و JavaScript، وبناء المستندات، وتشغيل خادم محلي.
`npm run dist`	ينشئ المجلد `dist/` مع الملفات المجمعة. يستخدم Sass, Autoprefixer, و terser.
`npm test`	يشغل الاختبارات محلياً بعد تشغيل `npm run dist`
`npm run docs-serve`	يبني ويشغل المستندات محلياً.

ابدأ مع الـ Bootstrap عبر npm باستخدام مشروعنا المبدئي! توجه إلى مستودع قالب Sass & JS example لترى كيفية بناء وتخصيص الـ Bootstrap في مشروع npm الخاص بك. يتضمن ذلك مترجم Sass و Autoprefixer و Stylelint و PurgeCSS و Bootstrap Icons.

الـ (Sass)

تستخدم Bootstrap Dart Sass لتجميع ملفات مصدر Sass الخاصة بنا إلى ملفات CSS (مضمنة في عملية البناء الخاصة بنا)، ونوصيك بالقيام بنفس الشيء إذا كنت تقوم بتجميع Sass باستخدام خط أنابيب الأصول الخاص بك. لقد استخدمنا سابقاً Node Sass لـ Bootstrap v4، ولكن LibSass والحزم المبنية فوقها، بما في ذلك Node Sass، أصبحت الآن مستبعدة.

يستخدم Dart Sass دقة تقريب تبلغ 10 ولأسباب تتعلق بالكفاءة لا يسمح بتعديل هذه القيمة. نحن لا نخفض هذه الدقة أثناء المعالجة الإضافية لـ CSS التي ننتجها، كما هو الحال أثناء التصغير (minification)، ولكن إذا اخترت القيام بذلك فنحن نوصي بالحفاظ على دقة لا تقل عن 6 لمنع مشكلات التقريب في المتصفح.

Autoprefixer

تستخدم Bootstrap Autoprefixer (مضمن في عملية البناء الخاصة بنا) لإضافة بادئات الموردين (vendor prefixes) تلقائياً إلى بعض خصائص CSS في وقت البناء. القيام بذلك يوفر لنا الوقت والكود من خلال السماح لنا بكتابة الأجزاء الرئيسية من CSS مرة واحدة بينما يلغي الحاجة إلى المزجات (mixins) الخاصة بالموردين مثل تلك الموجودة في v3.

نحن نحافظ على قائمة المتصفحات المدعومة من خلال Autoprefixer في ملف منفصل داخل مستودع GitHub الخاص بنا. انظر .browserslistrc لمزيد من التفاصيل.

RTLCSS

تستخدم Bootstrap RTLCSS لمعالجة CSS المجمعة وتحويلها إلى RTL – وهو ما يعني أساساً استبدال الخصائص التي تعتمد على الاتجاه الأفقي (مثل padding-left) بما يقابلها. يتيح لنا ذلك كتابة CSS مرة واحدة فقط وإجراء تعديلات طفيفة باستخدام توجيهات التحكم و القيمة الخاصة بـ RTLCSS.

المستندات المحلية

يتطلب تشغيل المستندات الخاصة بنا محلياً استخدام Astro. Astro هو مولد مواقع ثابتة حديث يتيح لنا بناء مستنداتنا بمزيج من Markdown ومكونات React. إليك كيفية البدء:

قم بتنفيذ إعداد الأدوات أعلاه لتثبيت جميع التبعيات.
من المجلد الرئيسي /bootstrap ، قم بتشغيل npm run docs-serve في سطر الأوامر.
افتح http://localhost:9001 في متصفحك، وها هي ذا.

تعرف على المزيد حول استخدام Astro من خلال قراءة مستنداته.

استكشاف الأخطاء وإصلاحها

إذا واجهت مشكلات في تثبيت التبعيات، فقم بإلغاء تثبيت جميع إصدارات التبعيات السابقة (العالمية والمحلية). ثم، قم بتشغيل npm install مرة أخرى.