مساهمة
ساعد في تطوير Bootstrap من خلال وثائقنا لبناء البرامج النصية والاختبارات.
إعداد الأدوات
يستخدم Bootstrap البرامج النصية npm لإنشاء الوثائق وترجمة الملفات المصدر. تحتوي حزمة package.json الخاصة بنا على هذه البرامج النصية لتجميع التعليمات البرمجية وتشغيل الاختبارات والمزيد. هذه ليست مخصصة للاستخدام خارج مستودعنا ووثائقنا.
لاستخدام نظام البناء الخاص بنا وتشغيل وثائقنا محليًا ، ستحتاج إلى نسخة من ملفات مصدر Bootstrap و Node. اتبع هذه الخطوات ويجب أن تكون مستعدًا لموسيقى الروك:
- قم بتنزيل وتثبيت Node.js ، والذي نستخدمه لإدارة تبعياتنا.
- إما أن تقوم بتنزيل مصادر Bootstrap أو مستودع Bootstrap الخاص بالشوكة .
- انتقل إلى الدليل الجذر
/bootstrap
وقم بالتشغيلnpm install
لتثبيت التبعيات المحلية الخاصة بنا المدرجة في package.json .
عند الانتهاء ، ستتمكن من تشغيل الأوامر المختلفة المتوفرة من سطر الأوامر.
استخدام البرامج النصية npm
تتضمن package.json الخاصة بنا العديد من المهام لتطوير المشروع. اركض npm run
لترى جميع نصوص npm في جهازك الطرفي. تشمل المهام الأساسية ما يلي:
مهمة | وصف |
---|---|
npm start |
يجمع CSS و JavaScript ، ويبني التوثيق ، ويبدأ خادمًا محليًا. |
npm run dist |
ينشئ dist/ الدليل بالملفات المترجمة. يستخدم Sass و Autoprefixer و terser . |
npm test |
يجري الاختبارات محليًا بعد الجريnpm run dist |
npm run docs-serve |
يبني ويدير الوثائق محليا. |
ساس
يستخدم Bootstrap Dart Sass لتجميع ملفات مصدر Sass الخاصة بنا في ملفات CSS (المضمنة في عملية البناء الخاصة بنا) ، ونوصيك بفعل الشيء نفسه إذا كنت تقوم بتجميع Sass باستخدام خط أنابيب الأصول الخاص بك. استخدمنا سابقًا Node Sass لـ Bootstrap v4 ، لكن LibSass والحزم المبنية فوقه ، بما في ذلك Node Sass ، أصبحت الآن مهملة .
يستخدم Dart Sass دقة تقريب تبلغ 10 ولأسباب تتعلق بالكفاءة لا تسمح بتعديل هذه القيمة. نحن لا نقلل من هذه الدقة أثناء المعالجة الإضافية لـ CSS المُنشأ لدينا ، على سبيل المثال أثناء التصغير ، ولكن إذا اخترت القيام بذلك ، فإننا نوصي بالحفاظ على دقة لا تقل عن 6 لمنع حدوث مشكلات في تقريب المتصفح.
المصفف الآلي
يستخدم Bootstrap Autoprefixer (مضمن في عملية الإنشاء الخاصة بنا) لإضافة بادئات البائع تلقائيًا إلى بعض خصائص CSS في وقت الإنشاء. يؤدي القيام بذلك إلى توفير الوقت والشفرة من خلال السماح لنا بكتابة الأجزاء الرئيسية من CSS الخاص بنا مرة واحدة مع التخلص من الحاجة إلى مزج البائعين مثل تلك الموجودة في الإصدار 3.
نحتفظ بقائمة المتصفحات المدعومة من خلال Autoprefixer في ملف منفصل داخل مستودع GitHub الخاص بنا. انظر .browserslistrc للحصول على التفاصيل.
RTLCSS
يستخدم Bootstrap RTLCSS لمعالجة CSS المترجمة وتحويلها إلى RTL - لاستبدال الخصائص المدركة للاتجاه الأفقي (على سبيل المثال padding-left
) بعكسها. يسمح لنا فقط بكتابة CSS الخاصة بنا مرة واحدة وإجراء تعديلات طفيفة باستخدام توجيهات التحكم والقيمة RTLCSS .
الوثائق المحلية
يتطلب تشغيل وثائقنا محليًا استخدام Hugo ، والذي يتم تثبيته عبر حزمة hugo-bin npm. Hugo هو مولد موقع ثابت سريع للغاية وقابل للتوسعة يوفر لنا: التضمينات الأساسية ، والملفات المستندة إلى Markdown ، والقوالب ، والمزيد. إليك كيفية البدء:
- قم بتشغيل إعداد الأدوات أعلاه لتثبيت جميع التبعيات.
- من الدليل الجذر
/bootstrap
، قم بتشغيلnpm run docs-serve
سطر الأوامر. - افتح
http://localhost:9001/
في المتصفح الخاص بك ، وفويلا.
تعرف على المزيد حول استخدام Hugo من خلال قراءة وثائقه .
استكشاف الأخطاء وإصلاحها
إذا واجهت مشاكل في تثبيت التبعيات ، فقم بإلغاء تثبيت جميع إصدارات التبعية السابقة (العالمية والمحلية). ثم أعد التشغيل npm install
.