بوتستراب (إطار عمل الواجهة الأمامية)

📅 آخر تحديث: ٢٧ يوليو ٢٠٢٦
✍️ نُشر في: ٢٧ يوليو ٢٠٢٦
📷 يحتوي على 2 صور
الموسوعة الحرة

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

اعتبارًا من مايو 2023 يُعدّ Bootstrap المشروع السابع عشر الأكثر حصولاً على النجوم (والمكتبة الرابعة الأكثر حصولاً على النجوم) على GitHub ، بأكثر من 164,000 نجمة. [ 4 ] اعتبارًا من يناير 2023 يستخدم Bootstrap من قبل 19.2% من جميع مواقع الويب وفقًا لـ W3Techs. [ 5 ]

سمات

Bootstrap هي مكتبة HTML وCSS وJS تُركز على تبسيط تطوير صفحات الويب المعلوماتية (مقارنةً بتطبيقات الويب ). الهدف الأساسي من إضافتها إلى مشروع ويب هو تطبيق خيارات Bootstrap من حيث اللون والحجم والخط والتصميم. وبالتالي، فإن العامل الرئيسي هو مدى ملاءمة هذه الخيارات للمطورين المسؤولين. بمجرد إضافتها إلى المشروع، تُوفر Bootstrap تعريفات أنماط أساسية لجميع عناصر HTML ، مما يُنتج مظهرًا موحدًا للنصوص والجداول وعناصر النماذج عبر جميع متصفحات الويب . بالإضافة إلى ذلك، يُمكن للمطورين الاستفادة من فئات CSS المُعرّفة في Bootstrap لتخصيص مظهر محتواهم بشكل أكبر. على سبيل المثال، تُوفر Bootstrap جداول وعناوين صفحات بألوان فاتحة وداكنة، واقتباسات بارزة ، ونصوصًا مُظللة.

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

مثال على صفحة ويب تستخدم إطار عمل Bootstrap
مثال على صفحة ويب تستخدم إطار عمل Bootstrap معروضة في متصفح Firefox

تُعدّ مكونات التخطيط من أبرز مكونات Bootstrap، إذ تؤثر على صفحة الويب بأكملها. يُطلق على مكون التخطيط الأساسي اسم "الحاوية"، حيث تُوضع جميع عناصر الصفحة الأخرى داخلها. يمكن للمطورين الاختيار بين حاوية ذات عرض ثابت وحاوية ذات عرض مرن. بينما تملأ الحاوية ذات العرض المرن عرض الصفحة بالكامل، تستخدم الحاوية ذات العرض الثابت أحد العروض الخمسة المحددة مسبقًا، وذلك حسب حجم الشاشة التي تعرض الصفحة: [ 6 ]

  • أصغر من 576 بكسل
  • 576–768 بكسل
  • 768–992 بكسل
  • 992–1200 بكسل
  • 1200–1400 بكسل
  • أكبر من 1400 بكسل

بمجرد وضع الحاوية في مكانها، تقوم مكونات تخطيط Bootstrap الأخرى بتنفيذ تخطيط CSS Flexbox من خلال تحديد الصفوف والأعمدة.

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

تاريخ

البدايات المبكرة

تم تطوير Bootstrap، الذي كان يُعرف سابقًا باسم Twitter Blueprint، بواسطة مارك أوتو وجاكوب ثورنتون في تويتر عام 2010 كإطار عمل لتشجيع التناسق بين الأدوات الداخلية. قبل Bootstrap، كانت تُستخدم مكتبات متنوعة لتطوير واجهات المستخدم، مما أدى إلى عدم اتساقها وزيادة عبء صيانتها. وفقًا لأوتو:

اجتمعنا أنا ومجموعة صغيرة جدًا من المطورين لتصميم وبناء أداة داخلية جديدة، ورأينا فرصةً لتقديم شيءٍ أكثر جوهرية. خلال هذه العملية، رأينا أنفسنا نبني شيئًا أكثر أهمية بكثير من مجرد أداة داخلية أخرى. بعد أشهر، توصلنا إلى نسخة أولية من Bootstrap كوسيلة لتوثيق ومشاركة أنماط التصميم والأصول الشائعة داخل الشركة. [ 7 ]

بعد بضعة أشهر من التطوير من قبل مجموعة صغيرة، بدأ العديد من مطوري تويتر بالمساهمة في المشروع كجزء من أسبوع الهاكاثون، وهو أسبوع مخصص لفريق تطوير تويتر. تمت إعادة تسمية المشروع من Twitter Blueprint إلى Twitter Bootstrap، وأُطلق كمشروع مفتوح المصدر في 19 أغسطس 2011. [ 8 ] ولا يزال المشروع يُدار من قبل أوتو، وثورنتون، ومجموعة صغيرة من المطورين الأساسيين، ومجتمع كبير من المساهمين. [ 9 ]

بوتستراب 2

في 31 يناير 2012، تم إصدار Bootstrap 2، الذي أضاف دعمًا مدمجًا لـ Glyphicons، والعديد من المكونات الجديدة، بالإضافة إلى تغييرات على العديد من المكونات الموجودة. يدعم هذا الإصدار تصميم المواقع الإلكترونية المتجاوب ، مما يعني أن تخطيط صفحات الويب يتكيف ديناميكيًا، مع مراعاة خصائص الجهاز المستخدم (سواء كان جهاز كمبيوتر مكتبيًا أو جهازًا لوحيًا أو هاتفًا محمولًا). [ 10 ] قبل إصدار Bootstrap 2.1.2 بفترة وجيزة، غادر أوتو وثورنتون تويتر، لكنهما التزما بمواصلة العمل على Bootstrap كمشروع مستقل. [ 11 ]

بوتستراب 3

في 19 أغسطس 2013، تم إطلاق Bootstrap 3. أعاد هذا الإصدار تصميم المكونات ليعتمد التصميم المسطح ومنهجية " الأجهزة المحمولة أولاً" . [ 12 ] يتميز Bootstrap 3 بنظام إضافات جديد مع أحداث مُصنّفة حسب المساحة . توقف دعم متصفحي Internet Explorer 7 وFirefox 3.6 في Bootstrap 3، ولكن يتوفر حل بديل اختياري لهذين المتصفحين. [ 13 ] كان Bootstrap 3 أيضًا أول إصدار يُطرح تحت مظلة مؤسسة twbs على GitHub بدلاً من Twitter. [ 14 ]

بوتستراب 4

أعلن أوتو عن Bootstrap 4 في 29 أكتوبر 2014. [ 15 ] صدرت النسخة التجريبية الأولى (ألفا) من Bootstrap 4 في 19 أغسطس 2015. [ 16 ] وصدرت النسخة التجريبية الأولى (بيتا) في 10 أغسطس 2017. [ 17 ] علّق أوتو العمل على Bootstrap 3 في 6 سبتمبر 2016، لإتاحة الوقت للعمل على Bootstrap 4. تم الانتهاء من Bootstrap 4 في 18 يناير 2018. [ 18 ]

تشمل التغييرات الهامة ما يلي:

  • إعادة كتابة الكود بشكل جذري
  • استبدال الأقل بالجرأة​
  • إضافة Rebootمجموعة من تغييرات CSS الخاصة بالعناصر في ملف واحد، بناءً علىNormalize
  • إيقاف دعم متصفحات IE8 و IE9 ونظام iOS 6
  • دعم CSS Flexible Box
  • إضافة خيارات تخصيص التنقل
  • إضافة أدوات التباعد والتحجيم المتجاوبة
  • التبديل من وحدة البكسل في CSS إلى وحدة em الجذرية
  • زيادة حجم الخط العالمي من 14 بكسل إلى 16 بكسل لتحسين سهولة القراءة
  • حذف المكونات panelو thumbnailو pagerوwell
  • الاستغناء عن Glyphiconsخط الأيقونات
  • عدد هائل من فئات الأدوات المساعدة
  • تحسين تصميم النماذج والأزرار والقوائم المنسدلة وعناصر الوسائط وفئات الصور

يدعم Bootstrap 4 أحدث إصدارات متصفحات جوجل كروم ، وفايرفوكس ، وإنترنت إكسبلورر ، وأوبرا ، وسفاري (باستثناء نظام ويندوز). كما يدعم الإصدارات السابقة حتى إنترنت إكسبلورر 10 وأحدث إصدار من فايرفوكس ذي الدعم الموسع (ESR). [ 19 ]

بوتستراب 5

تم إصدار Bootstrap 5 رسميًا في 5 مايو 2021. [ 20 ] [ 21 ]

تشمل التغييرات الرئيسية ما يلي: [ 22 ]

  • مكون قائمة جانبي جديد
  • إزالة الاعتماد على jQuery لصالح JavaScript الخام
  • إعادة تصميم الشبكة لدعم الفواصل والأعمدة المتجاوبة الموضوعة خارج الصفوف
  • نقل الوثائق من جيكيل إلى هوغو
  • إسقاط الدعم لمتصفح إنترنت إكسبلورر [ 23 ]
  • نقل بنية الاختبار من QUnit إلى Jasmine
  • إضافة مجموعة مخصصة من أيقونات SVG [ 24 ]
  • إضافة خصائص CSS مخصصة
  • واجهة برمجة تطبيقات محسّنة
  • أنظمة الشبكة المحسنة
  • تحسين تخصيص المستندات
  • نماذج محدثة
  • دعم الكتابة من اليمين إلى اليسار
  • يدعم الوضع الداكن المدمج

انظر أيضاً

مراجع

  1. ↑ "الإصدار v5.3.8" . 25 أغسطس 2025. تم الاطلاع عليه في 25 أغسطس 2025 .
  2. ↑ "bootstrap/LICENSE" . Github .
  3. ↑ "bootstrap/LICENSE (v3.0.3)" . Github .
  4. ↑ "بحث · نجوم:>100000" . جيت هاب . تم الاسترجاع في 4 ديسمبر 2022 .
  5. ↑ "إحصائيات الاستخدام وحصة السوق لـ Bootstrap للمواقع الإلكترونية" . w3techs.com . تم الاطلاع عليه بتاريخ 24 يناير 2023 .
  6. ↑ "حاويات Bootstrap · Bootstrap الإصدار 5.0" .
  7. ↑ أوتو، مارك (17 يناير 2012). "البناء الذاتي في قائمة منفصلة رقم 342" . مدونة مارك أوتو . مؤرشفة من الأصل في 28 أكتوبر 2016. تم الاطلاع عليها في 23 فبراير 2017 .
  8. ↑ أوتو، مارك (19 أغسطس 2011). "الانطلاق من تويتر" . مدونة المطورين . تويتر. مؤرشف من الأصل في 23 فبراير 2017. تم الاطلاع عليه في 23 فبراير 2017 .
  9. ↑ "حول" . بوتستراب . 19 أغسطس 2011. تم الاسترجاع في 23 فبراير 2017 .
  10. ↑ أوتو، مارك (31 يناير 2012). "مرحباً بـ Bootstrap 2.0" . مدونة المطورين . تويتر. مؤرشف من الأصل في 23 فبراير 2017. تم الاطلاع عليه في 23 فبراير 2017 .
  11. ↑ أوتو، مارك (29 سبتمبر 2012). "إلى الأمام" . blog.getbootstrap.com .
  12. ↑ "مدونة بوتستراب - تم إصدار بوتستراب 3" . 19 أغسطس 2013.
  13. ↑ أوتو، مارك (19 أغسطس 2013). "إصدار Bootstrap 3" . مؤرشف من الأصل في 21 أكتوبر 2016. تم الاطلاع عليه في 23 فبراير 2017 .
  14. ↑ "خطط Bootstrap 3" . 10 ديسمبر 2012.
  15. ↑ أوتو، مارك (29 أكتوبر 2014). "إصدار Bootstrap 3.3.0" . مؤرشف من الأصل في 24 يوليو 2016. تم الاطلاع عليه في 23 فبراير 2017 .
  16. ↑ أوتو، مارك (19 أغسطس 2015). "Bootstrap 4 alpha" . مؤرشف من الأصل في 23 يناير 2017. تم الاطلاع عليه في 23 فبراير 2017 .
  17. ↑ أوتو، مارك؛ ثورنتون، جاكوب (10 أغسطس 2017). "Bootstrap 4 Beta" . تم الاطلاع عليه في 16 أغسطس 2017 .
  18. ↑ "Bootstrap 4" . blog.getbootstrap.com . ١٨ يناير ٢٠١٨. تم الاطلاع عليه في ٥ فبراير ٢٠٢١ .
  19. ↑ "المتصفحات المدعومة" . بوتستراب . تم الاطلاع عليه بتاريخ 23 فبراير 2017 .
  20. ↑ "إصدار الإصدار v5.0.0 (#33647) · twbs/bootstrap" . GitHub . تم الاطلاع عليه في 5 مايو 2021 .
  21. ↑ "Bootstrap 5" . blog.getbootstrap.com . 5 مايو 2021.
  22. ↑ "Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap" . GitHub . Retrieved September 29, 2019 .
  23. ↑ "الإصدار 5: إزالة دعم متصفح إنترنت إكسبلورر بواسطة XhmikosR · طلب سحب رقم 30377 · twbs/bootstrap" . جيت هاب . تم الاطلاع عليه في 7 أبريل 2020 .
  24. ↑ "أيقونات بوتستراب" . تم الاطلاع عليه في 7 نوفمبر 2022 .
  25. ^ "قارورة التمهيد" . مرحبا قارورة . تم الاسترجاع في 7 نوفمبر 2022 .
  26. ^ "بوتستراب-جانجو" . زيلينيج . تم الاسترجاع في 7 نوفمبر 2022 .