כיצד להשתמש ב-Bootstrap בפרויקט ג'נגו

קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

מאז שחרורו ב-2013, Bootstrap חוללה מהפכה בעיצוב דפי אינטרנט של מפתחים. Bootstrap היא מסגרת חזיתית פופולרית המשמשת לעיצוב יישומי אינטרנט רספונסיביים.

Django משתמש בסגנונות ה-CSS הבנויים מראש של Bootstrap ובתוספי JavaScript לעיצוב דפי אינטרנט. למרות שזה מפחית את הטרחה של הסגנון, הגדרת התצורה שלו ב-Django יכולה להיות מאתגרת.

איפור של סרטון היום

בואו ללמוד כיצד להתקין ולהגדיר את Bootstrap באפליקציית Django.

כיצד להתקין Bootstrap

יש שתי דרכים לעשות זאת השתמש ב-Bootstrap 5 בפרויקט ג'נגו. אתה יכול להתקין אותו ביישום שלך או להפנות לקבצים באמצעות ה-CDN של Bootstrap . פרויקט זה ישתמש בשיטה הקודמת.

לפני התקנת Bootstrap, ליצור פרויקט Django ואפליקציה בשם גלריה. האפליקציה תהיה גלריית תמונות, ותשתמש ב-Bootstrap לסגנון סרגל הניווט של האפליקציה.

לאחר מכן, התקן את Bootstrap עם הפקודה הבאה:

כיצד ליצור קובץ עטלף חלונות 10

pipenv install django-bootstrap5  # installs Bootstrap version 5

בדוק את Pipfile ואשר שיש תלות ב-Bootstrap 5. כעת עליך להודיע לפרויקט Django שאתה משתמש בתלות Bootstrap.

כיצד לבדוק gpu windows 10

בתוך ה 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.

כיצד להגן על wifi מהשכנים

לאחר מכן, צור סקריפט בלוק המגדיר את הפונקציונליות של JavaScript.

כולל ה navbar.html בתוך ה base.html מקשר אותו ל-Bootstrap.

בדוק את התצורה על ידי הוספת סגנונות Bootstrap ל- navbar.html תבנית:

<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 שלך? ג'נגו תדהים אתכם עם היכולות שלה בפיתוח אתרים.