كيفية استخدام Bootstrap في مشروع Django

القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

منذ إصداره في عام 2013 ، أحدث Bootstrap ثورة في طريقة تصميم المطورين لصفحات الويب. Bootstrap هو إطار أمامي شائع يستخدم لتصميم تطبيقات الويب سريعة الاستجابة.

يستخدم Django أنماط CSS المبنية مسبقًا من Bootstrap ومكونات JavaScript الإضافية لتصميم صفحات الويب. في حين أنه يقلل من متاعب التصميم ، فإن تكوينه في Django قد يكون صعبًا.

اجعل فيديو اليوم

دعنا نتعلم كيفية تثبيت Bootstrap وتكوينه في تطبيق Django.

كيفية تثبيت Bootstrap

هناك طريقتان ل استخدم Bootstrap 5 في مشروع Django. يمكنك تثبيته في التطبيق الخاص بك أو الرجوع إلى الملفات باستخدام CDN لـ Bootstrap . سيستخدم هذا المشروع الطريقة السابقة.

قبل تثبيت Bootstrap ، إنشاء مشروع Django وتطبيق يسمى معرض. سيكون التطبيق عبارة عن معرض للصور ، وستستخدم Bootstrap لتصميم شريط التنقل الخاص بالتطبيق.

بعد ذلك ، قم بتثبيت Bootstrap باستخدام الأمر التالي:

pipenv install django-bootstrap5  # installs Bootstrap version 5

تحقق من ملف Pipfile وتأكد من وجود تبعية Bootstrap 5. تحتاج الآن إلى إخطار مشروع Django بأنك تستخدم تبعية Bootstrap.

في ال settings.py ملف ، قم بتسجيل Bootstrap كما هو موضح أدناه:

INSTALLED_APPS = [ 
    'gallery', 
    'bootstrap5',    
]

يؤدي تسجيل Bootstrap في إعدادات المشروع إلى ربط تبعية django-bootstrap5 بمشروعك. سيكون متاحًا لأي تطبيق آخر محدد في المشروع.

قم بتطبيق Bootstrap على قالب

أولاً ، قم بإنشاء مجلد باسم القوالب في مجلد التطبيق الخاص بك. داخل هذا المجلد ، قم بإنشاء ملف base.html ملف و navbar.html ملف. ستحتوي القوالب على ملفات HTML التي سيصممها Bootstrap.

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

في ال base.html الملف ، بما في ذلك ما يلي:

{% load bootstrap5 %} 
		 
	 
<!DOCTYPE html> 
		 
<html lang="en"> 
		 
<head> 
	 
      <meta charset="UTF-8"> 
		 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <title> Gallery </title> 
		 
		 
       {% block styles %} 
		 
		 
       {% bootstrap_css %} 
			 
		 
       {% endblock %} 
		 
</head> 
<body>   
       {% include 'navbar.html' %} 
       {% block content %} {% endblock %} 
       {% block scripts %} 
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> 
       </script> 
       {% bootstrap_javascript %} 
</body> 
</html>

أولاً ، قم بتحميل تبعية bootstrap5. ثم قم بإنشاء نمطين للكتل حيث ستحدد جميع أنماط القوالب. تشمل {٪ bootstrap_css٪} علامة القالب ورابط إلى ملف Bootstrap CSS.

بعد ذلك ، قم بإنشاء نص برمجي يحدد وظيفة JavaScript.

بما في ذلك navbar.html في ال base.html يربطها بـ Bootstrap.

اختبر التكوين عن طريق إضافة أنماط Bootstrap إلى ملف navbar.html قالب:

كيفية تغيير أيقونة التطبيق windows 10

<nav class="navbar navbar-expand-lg"> 
    <div class="container-fluid"> 
        <h2 class="brand" style="color:green">PICHA GALLERY</h2> 
  
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button> 
  
        <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
            <ul class="navbar-nav ml-auto mb-2 mb-lg-0"> 
                <li class="nav-item"><a class="nav-link nav-link-1 active" aria-current="page" href="{% url 'home' %}" style="color:green">Home</a></li> 
                <li class="nav-item"><a class="nav-link nav-link-2" href="#gallery" style="color:green">Gallery</a</li> 
            </ul> 
        </div> 
    </div> 
</nav>

الآن ، قم بتشغيل الخادم وتحقق من موقعك في المتصفح. يجب أن ترى التصميم الذي يطبقه Bootstrap على شريط التنقل.

لماذا نستخدم Bootstrap في مشاريع Django؟

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

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

لماذا لا تستخدم Bootstrap لتصميم وإنشاء واجهات مستخدم مذهلة لمشاريع Django الخاصة بك؟ سوف يدهشك Django بإمكانياته في تطوير الويب.