מאז שחרורו ב-2013, Bootstrap חוללה מהפכה בעיצוב דפי אינטרנט של מפתחים. Bootstrap היא מסגרת חזיתית פופולרית המשמשת לעיצוב יישומי אינטרנט רספונסיביים.
Django משתמש בסגנונות ה-CSS הבנויים מראש של Bootstrap ובתוספי JavaScript לעיצוב דפי אינטרנט. למרות שזה מפחית את הטרחה של הסגנון, הגדרת התצורה שלו ב-Django יכולה להיות מאתגרת.
בואו ללמוד כיצד להתקין ולהגדיר את Bootstrap באפליקציית Django.
כיצד להתקין Bootstrap
יש שתי דרכים לעשות זאת השתמש ב-Bootstrap 5 בפרויקט ג'נגו. אתה יכול להתקין אותו ביישום שלך או להפנות לקבצים באמצעות ה-CDN של Bootstrap. פרויקט זה ישתמש בשיטה הקודמת.
לפני התקנת Bootstrap, ליצור פרויקט Django ואפליקציה בשם גלריה. האפליקציה תהיה גלריית תמונות, ותשתמש ב-Bootstrap לסגנון סרגל הניווט של האפליקציה.
לאחר מכן, התקן את Bootstrap עם הפקודה הבאה:
pipenv להתקין django-bootstrap5 # מתקין את גרסה 5 של Bootstrapבדוק את Pipfile ואשר שיש תלות ב-Bootstrap 5. כעת עליך להודיע לפרויקט Django שאתה משתמש בתלות Bootstrap.
בתוך ה settings.py קובץ, רשום את Bootstrap כפי שמוצג להלן:
INSTALLED_APPS = [
'גלריה',
'bootstrap5',
]רישום Bootstrap בהגדרות הפרויקט מחבר את התלות django-bootstrap5 לפרויקט שלך. הוא יהיה זמין לכל אפליקציה אחרת המוגדרת בפרויקט.
החל את Bootstrap על תבנית
ראשית, צור תיקייה בשם תבניות בתיקיית היישום שלך. בתוך תיקיה זו, צור א base.html קובץ וא navbar.html קוֹבֶץ. התבניות יכללו קבצי HTML ש-Bootstrap יעצב.
אמנם אתה יכול להחיל Bootstrap על navbar.html תבנית, השימוש בקובץ בסיס הוא קונבנציונלי. א base.html הקובץ יכיל את כל הסקריפטים והקישורים ליישום על כל דף. זה מפחית את המורכבות של תבניות בודדות, מה שהופך את הקוד שלך לנקי יותר וקל יותר להבנה.
בתוך ה base.html קובץ, כלול את הדברים הבאים:
{% load bootstrap5 %}<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="UTF-8">
<מטא http-equiv="X-UA-תואם" תוכן="IE=קצה">
<מטא שם="נקודת מבט" תוכן="רוחב=רוחב התקן, קנה מידה התחלתי=1.0">
<כותרת> גלריה </title>{% block styles %}
{% bootstrap_css %}
{% endblock %}
</head>
<גוּף>
{% כוללים 'navbar.html' %}
{% block content %} {% endblock %}
{% block scripts %}
<script 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 תבנית:
<מחלקה nav="navbar navbar-expand-lg">
<div class="מיכל-נוזל">
<h2 class="מותג" סגנון="צבע ירוק">גלריית PICHA</h2><כפתור מחלקה="navbar-toggler" סוג="לַחְצָן" data-toggle="הִתמוֹטְטוּת" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="שֶׁקֶר" aria-label="החלף ניווט"><אני כיתה="פא-פא-ברים"></אני></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<לי כיתה="nav-item"><כיתה="nav-link nav-link-1 פעיל" aria-current="עמוד" 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 שלך? ג'נגו תדהים אתכם עם היכולות שלה בפיתוח אתרים.
