Bootstrap هي إطار عمل (Framework) أمامي (Front-end) لتطوير تطبيقات الويب وتصميم المواقع. تم تطوير Bootstrap من قبل فريق تويتر، وأصدر لأول مرة في عام 2011. يهدف Bootstrap إلى تسهيل عملية تصميم وتطوير المواقع الاستجابة وتوفير مظهر موحد وواجهة مستخدم قوية ومتناسقة عبر مختلف المنصات والأجهزة.
طريقة عمل Bootstrap
يعتمد Bootstrap على تقنيات HTML وCSS وJavaScript، ويوفر مجموعة واسعة من الفئات والأدوات المساعدة لإنشاء تجارب مستخدم متميزة. يحتوي Bootstrap على نظام شبكة (Grid System) قابلاً للتعديل يسهل تنظيم العناصر وتحقيق تصميم استجابة وتناسق بين مختلف الأجهزة وحجم الشاشة. كما يحتوي أيضًا على مجموعة واسعة من العناصر المساعدة مثل الأزرار والنماذج والقوائم وأشرطة التنقل والموديلات وغيرها الكثير.
باستخدام Bootstrap، يمكن للمطورين تسريع عملية التطوير وتقليل الجهد المبذول في بناء التصميم الأمامي للمواقع والتطبيقات. بفضل توثيق شامل ومجتمع نشط، يمكن العثور على العديد من النماذج والقوالب والموارد الإضافية لتسهيل الاستخدام وتحسين التصميم وتجربة المستخدم.
طرق استخدام Bootstrap مع Django
هناك 3 طرق رئيسية لاستخدام Bootstrap في مشروع Django الخاص بك. إما عن طريق تنزيل الملفات المطلوبة وإدراجها في مشروعك، أو يمكنك تثبيت Bootstrap في بيئتك الافتراضية، أو استخدام Bootstrap كـ CDN. وفيما يلي شرح تفصيلي لهذه الطرق الرئيسية.
الطريقة الأولي: استخدام Bootstrap كـ CDN
هذه الطريقة تعتمد على استخدام Bootstrap 5 مباشرة كـ CDN في قوالب Django الخاصة بك.
1 - ابدأ بفتح قالب HTML الخاص بك في مشروع Django.
2 - أضف روابط Bootstrap CSS و JS في قسم <head> من القالب. يمكنك الحصول على الروابط المحدثة من الموقع الرسمي لـ Bootstrap.
<!DOCTYPE html> <html> <head> <title>My Django App</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> </head> <body> <!-- Page content here --> </body> </html>
الطريقة الثانية: تنزيل Bootstrap واستخدامه محليًا
هذه الطريقة تنطوي على تنزيل ملفات CSS و JS الخاصة بـ Bootstrap واستخدامها محليًا في مشروع Django.
1 - قم بتنزيل ملفات CSS و JS الخاصة بـ Bootstrap 5 من الموقع الرسمي.
2 - قم بإنشاء مجلد يسمى "static" في مجلد المشروع الرئيسي إذا لم يكن موجودًا بالفعل.
3 - انسخ ملفات CSS و JS التي قمت بتنزيلها إلى مجلد "static" الذي أنشأته.
4 - في قالب HTML الخاص بك، قم بتضمين روابط ال CSS و JS المحلية.
<!DOCTYPE html> <html> <head> <title>My Django App</title> <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"> <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script> </head> <body> <!-- Page content here --> </body> </html>
تأكد من أن المسارات المستخدمة في الروابط تتوافق مع مسارات الملفات الفعلية في مجلد الاستاتيك الخاص بك.
الطريقة الثالثة: استخدام مكتبة مثل django-bootstrap5
هذه الطريقة تعتمد على استخدام مكتبة مثل django-bootstrap5 التي تسهل تكامل Bootstrap 5 مع Django.
1 - قم بتثبيت مكتبة django-bootstrap5 باستخدام مدير الحزم Python pip:
pip install django-bootstrap5
2 - قم بإضافة 'bootstrap5' إلى قائمة 'INSTALLED_APPS' في ملف settings.py:
INSTALLED_APPS = [ # ... Other packages here 'bootstrap5', ]
3 - في قالب HTML الخاص بك، قم بتضمين توابع Bootstrap 5 التي تقدمها مكتبة django-bootstrap5.
{% load bootstrap5 %}
<!DOCTYPE html>
<html>
<head>
<title>My Django App</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<!-- Page content here -->
</body>
</html>
هذه الطريقة توفر مجموعة من وسوم القوالب والمساعدات التي تسهل استخدام Bootstrap 5 في تطبيق Django الخاص بك.
هذه هي طرق استخدام Bootstrap مع Django مع الشرح بالتفصيل والأمثلة. يمكنك اختيار الطريقة التي تناسب احتياجاتك وتفضيلاتك وبدء استخدام Bootstrap في مشروع Django الخاص بك.