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

إنه إطار عمل CSS مفتوح المصدر ومكتوب بلغات HTML وCSS وLess (v3) وSass (v4) وJavaScript، وهو مُصمَّم خصيصًا ليقدم لمطوري الويب وسيلةً مُبسَّطةً لبناء المواقع الإلكترونية بسرعة أكبر. فإطارات تصميم CSS وJavaScript توفر لك خيارات متعددة لأشكال الخطوط، والاستمارات، والأزرار، والتصفح، والنوافذ المنبثقة، وكاروسيل الصور (image carousels)، وغيرها من مكونات الواجهة.

إطار عمل Bootstrap مجاني، فيمكنك تحميله واستخدامه في إنشاء أي عدد من المشروعات. اقرأ الخطوات التالية لتعرف طريقة تحميل Bootstrap مجانًا.

طريقة تحميل Bootstrap وتثبيته على الكمبيوتر مجانًا

  1. اضغط على زر “التنزيل الآن” في الشريط الجانبي لتذهب مباشرةً إلى صفحة تحميل Bootstrap الرسمية.
  2. اضغط على زر التحميل “Download”، كما هو موضح أدناه لتحميل الحزمة.
    Bootstrap download page screenshot
  3. اذهب إلى مجلد التحميلات على جهازك وافتح الملف المضغوط الذي حملتَه للتوّ. يحتوي هذا الملف على حِزم CSS وإضافات JavaScript مُجمَّعة ومُصغَّرة.
  4. كل ما تحتاج إليه هو ملف “bootstrap.css” الموجود في مجلد CSS، كما هو موضح أدناه، فافتح مجلد CSS واضغط على تبويب العرض “view”، ثم اختر عرض صيغ أسماء الملفات “File name extensions”. واحذف الملفات الأخرى الموجودة في المجلد.
    Bootstrap CSS file screenshot
  5. على نحو مماثل، اذهب إلى مجلد Javascript. كل ما تحتاج إليه هنا هو ملف “bootstrap.js”، فاحذف باقي الملفات، ثم ارجع وانقل المجلدين “css” و”js” إلى مجلد جديد تمامًا. والآن يمكنك حذف الملف المضغوط.
    Bootstrap JS file screenshot
  6. يمكنك الآن أن تبدأ إنشاء مستندات HTML أساسية باستخدام برنامج مناسب لتعديل النصوص، وأن تربطها بعد ذلك بملفي bootstrap.css وbootstrap.js. تأكد من وجود هذين الملفين في نفس مجلد ملفات HTML الخاصة بالموقع الإلكتروني الذي تصممه.

كيفية إزالة تثبيت Bootstrap من حاسوبك

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

إذا كنتَ تبحث عن إطار عمل آخر مشابه لتطوير الواجهة الأمامية، يمكنك تجربة البدائل المجانية الموضحة أدناه.

مراجعة إطار عمل Bootstrap

يُعتبر Bootstrap حلًّا متعدد الوظائف وسهل الاستخدام لإنشاء تصميمات الويب التفاعلية. فهو إطار عمل مجاني مفتوح المصدر لتصميم الواجهة الأمامية من أجل تسريع أعمال تطوير الويب وتسهيلها.

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

أحدث نسخة منه تحتوي على قوائم متحركة (من نوع off-canvas) وتلغي الاعتماد على jQuery، وتعتمد بدلًا من ذلك على Vanilla JavaScript. وتسمح لك أيضًا بإضافة مجموعة مخصصة من أيقونات SVG وخصائص CSS أو واجهة برمجة تطبيقات (API) مُحسَّنة، بالإضافة إلى ميزات أخرى.

ميزات Bootstrap

  • التفاعلية: ميزات CSS التفاعلية التي يقدمها Bootstrap تتكيف مع الهواتف المحمولة، والأجهزة اللوحية، والحواسيب المكتبية.
  • كثرة قوالب التصميم: يحتوي على عدة قوالب تصميم بلغات HTML وJS وCSS.
  • المرونة والبساطة: لكل مشروع، سيكون أمامك عدة خيارات للألوان والأحجام والخطوط والتخطيطات (هذا أبرز مكونات Bootstrap)، لتختار من بينها من أجل تخصيص مظهر المحتوى الذي تنشره على الويب بما يناسبك.
  • مكونات Javascript: على خلاف بعض إطارات العمل الأخرى في مجال تصميم الواجهة الأمامية، يحتوي Bootstrap على عدد من مكونات Javascript، ومنها إضافات jQuery.
  • يركز على الهواتف المحمولة في الأساس: تصميمات Bootstrap تركز على الأنماط الموجهة إلى الهواتف المحمولة في المقام الأول.
  • التوافق مع المتصفحات: يتوافق Bootstrap 5 مع كل المتصفحات الحديثة: ومنها كروم، وMicrosoft Edge، وموزيلا فايرفوكس، وSafari، وOpera.
  • سهولة الاستخدام: كل ما تحتاج إليه لتبدأ استخدام Bootstrap هو معرفة أساسيات HTML وCSS.

بدائل مجانية لحزمة Bootstrap

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

Bulma: هو إطار عمل CSS يشبه Bootstrap في كثير من النواحي، ويعتمد على وحدة التخطيط المرنة “Flexible Box Module”، والتي تُسمى Flexbox. وباستثناء إضافات JS، يحتوي إطار عمل Bulma على معظم عناصر الواجهة الأمامية الموجودة في Bootstrap. ومن ميزات Bulma التخطيط التفاعلي الموجَّه إلى الهواتف المحمولة في الأساس، وCSS المُطبَّع (Normalized CSS)، والثيمات القابلة للتعديل، وأشكال الخطوط الأساسية، إلخ.

HTML5 Boilerplate: هو قالب لتصميم الواجهة الأمامية بلغات HTML5 وCSS3 وJavaScript من إنشاء عدة مطورين، وهو مثالي لبناء أو تصميم صفحات الويب بمختلف أنواعها، ولبناء المواقع وتطبيقات الويب التفاعلية السريعة عالية الكفاءة.

الأسئلة الشائعة

هل Bootstrap مجاني؟

ليس Bootstrap مجانيًا وحسب، بل ويتيح لك كل الأدوات اللازمة لبناء مواقع الويب التفاعلية السريعة. اتبع هذه الخطوات السهلة لتحميل Bootstrap مجانًا.

هل Bootstrap آمن؟

نعم، من الآمن تحميل Bootstrap وتثبيته، لكن احرص على تحميل الحزمة عن طريق موقع Bootstrap الرسمي، فهكذا تحمي نفسك من الفيروسات والبرمجيات الخبيثة وملفات التجسس.

هل يمكن إنشاء صفحة للأسئلة الشائعة باستخدام Bootstrap؟

يمكنك استخدام مكونات مثل “accordion” أو “collapse” لتصميم قسم أسئلة شائعة باستخدام أحدث نسخة Bootstrap 5.

تحميل Bootstrap الآن!