منذ إصداره في عام 2013 ، أحدث Bootstrap ثورة في طريقة تصميم المطورين لصفحات الويب. Bootstrap هو إطار أمامي شائع يستخدم لتصميم تطبيقات الويب سريعة الاستجابة.
يستخدم Django أنماط CSS المبنية مسبقًا من Bootstrap ومكونات JavaScript الإضافية لتصميم صفحات الويب. في حين أنه يقلل من متاعب التصميم ، فإن تكوينه في Django قد يكون صعبًا.
دعنا نتعلم كيفية تثبيت Bootstrap وتكوينه في تطبيق Django.
كيفية تثبيت Bootstrap
هناك طريقتان ل استخدم Bootstrap 5 في مشروع Django. يمكنك تثبيته في التطبيق الخاص بك أو الرجوع إلى الملفات باستخدام CDN لـ Bootstrap. سيستخدم هذا المشروع الطريقة السابقة.
قبل تثبيت Bootstrap ، إنشاء مشروع Django وتطبيق يسمى معرض. سيكون التطبيق عبارة عن معرض للصور ، وستستخدم Bootstrap لتصميم شريط التنقل الخاص بالتطبيق.
بعد ذلك ، قم بتثبيت Bootstrap باستخدام الأمر التالي:
بيبينف ثَبَّتَ جانغو التمهيد 5 # يقوم بتثبيت الإصدار 5 من Bootstrapتحقق من ملف Pipfile وتأكد من وجود تبعية Bootstrap 5. تحتاج الآن إلى إخطار مشروع Django بأنك تستخدم تبعية Bootstrap.
في ال settings.py ملف ، قم بتسجيل Bootstrap كما هو موضح أدناه:
INSTALLED_APPS = [
'صالة عرض',
'التمهيد 5',
]يؤدي تسجيل Bootstrap في إعدادات المشروع إلى ربط تبعية django-bootstrap5 بمشروعك. سيكون متاحًا لأي تطبيق آخر محدد في المشروع.
قم بتطبيق Bootstrap على قالب
أولاً ، قم بإنشاء مجلد باسم القوالب في مجلد التطبيق الخاص بك. داخل هذا المجلد ، قم بإنشاء ملف base.html ملف و navbar.html ملف. ستحتوي القوالب على ملفات HTML التي سيصممها Bootstrap.
بينما يمكنك تطبيق Bootstrap على ملف navbar.html النموذج ، باستخدام ملف أساسي تقليدي. أ base.html سيحتوي الملف على جميع البرامج النصية والروابط لتطبيقها على أي صفحة. إنه يقلل من تعقيد القوالب الفردية ، مما يجعل كودك أكثر وضوحًا وأسهل في الفهم.
في ال base.html الملف ، بما في ذلك ما يلي:
{٪ تحميل التمهيد 5٪}<! DOCTYPE html>
<أتش تي أم أل لانج ="ar">
<رأس>
<meta charset ="UTF-8">
<meta http-equiv ="متوافق مع X-UA" المحتوى ="IE = حافة">
<اسم التعريف ="منفذ العرض" المحتوى ="العرض = عرض الجهاز ، المقياس الأولي = 1.0">
<عنوان> صالة عرض </title>{٪ كتلة الأنماط٪}
{٪ bootstrap_css٪}
{٪ endblock٪}
</head>
<جسم>
{٪ يشمل 'navbar.html' %}
{٪ block content٪} {٪ endblock٪}
{٪ حظر البرامج النصية٪}
<النصي src ="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" النزاهة ="sha384-MrcW6ZMFYlzcLA8Nl + NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP + JcXn / tWtIaxVXM" crossorigin ="مجهول">
</script>
{٪ bootstrap_javascript٪}
</body>
</html>
أولاً ، قم بتحميل تبعية bootstrap5. ثم قم بإنشاء نمطين للكتل حيث ستحدد جميع أنماط القوالب. تشمل {٪ bootstrap_css٪} علامة القالب ورابط إلى ملف Bootstrap CSS.
بعد ذلك ، قم بإنشاء نص برمجي يحدد وظيفة JavaScript.
بما في ذلك navbar.html في ال base.html يربطها بـ Bootstrap.
اختبر التكوين عن طريق إضافة أنماط Bootstrap إلى ملف navbar.html نموذج:
<فئة التنقل ="نافبار نافبار توسيع ال جي">
<فئة div ="سائل الحاوية">
<فئة h2 ="ماركة" النمط ="الون الاخضر">معرض PICHA</h2><فئة الزر ="نافبار- toggler" اكتب ="زر" تبديل البيانات ="ينهار" هدف البيانات ="#navbarSupportedContent" الضوابط آريا ="navbarSupportedContent" موسعة الأغنية ="خطأ شنيع" aria-label ="تبديل التنقل"><أنا الطبقة ="فاس فاس"></أنا></button>
<فئة div ="طي نافبار انهيار" معرف ="navbarSupportedContent">
<فئة ul ="نافبار-نافي-مل-اوتو mb-2-mb-lg-0">
<فئة لي ="nav-item"><فئة ="nav-link nav-link-1 active" آريا الحالي ="صفحة" href ="{٪ url 'بيت' %}" النمط ="الون الاخضر">بيت</أ></li>
<فئة لي ="nav-item"><فئة ="nav-link nav-link-2" href ="#صالة عرض" النمط ="الون الاخضر">صالة عرض</أ</li>
</ul>
</div>
</div>
</nav>
الآن ، قم بتشغيل الخادم وتحقق من موقعك في المتصفح. يجب أن ترى التصميم الذي يطبقه Bootstrap على شريط التنقل.
لماذا نستخدم Bootstrap في مشاريع Django؟
ستستخدم Django في الغالب لتطوير الواجهة الخلفية ، ولكن يمكنها أيضًا إنشاء صفحات أمامية مذهلة. يعد استخدام Bootstrap لتصميم صفحات الواجهة الأمامية ممارسة جيدة للمبتدئين في Django. تحصل على فهم متعمق لـ Django عندما تقوم بإنشاء تطبيقات مكدسة كاملة.
مثل أي إطار عمل للواجهة الأمامية ، يمكنك استخدام فئات Bootstrap مع مشروع Django لتصميم صفحات الويب الخاصة بك. يحتوي Bootstrap 5 على مكونات أفضل وورقة أنماط سريعة. كما أن لديها استجابة محسنة للأجهزة الحديثة.
لماذا لا تستخدم Bootstrap لتصميم وإنشاء واجهات مستخدم مذهلة لمشاريع Django الخاصة بك؟ سوف يدهشك Django بإمكانياته في تطوير الويب.