افزودن Bootstrap 5 (Add Bootstrap 5)
می خواهیم «Bootstrap 5» را به جنگو اضافه کنیم. بوت استرپ یک فریم ورک (Framework) برای استایل دهی سریع است. یعنی مجموعه ای از کلاس های آماده. روش پیشنهادی، نصب ماژول در محیط مجازی است. سپس آن را در تنظیمات و قالب فعال می کنیم.
نصب Bootstrap 5 در محیط مجازی
اول وارد محیط مجازی شو. محیط مجازی (Virtual Environment) یعنی یک پوشه با پایتونِ جدا.
Scripts\activate.bat
حالا پکیج بوت استرپ برای جنگو را نصب کن.
pip install django-bootstrap-v5
افزودن به تنظیمات پروژه
در settings.py باید ماژول را به INSTALLED_APPS اضافه کنیم. این لیست، برنامه های فعال پروژه است.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'members',
'bootstrap5',
]
قراردادن Bootstrap 5 در قالب اصلی
در master.html تگ های لازم را لود کن. سپس کلاس های آماده را استفاده کن.
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
{% load bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<div class="container">
<ul class="nav bg-info">
<li class="nav-item">
<a class="nav-link link-light" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link link-light" href="/members">MEMBERS</a>
</li>
</ul>
{% block content %}
{% endblock %}
</div>
</body>
</html>
چرا این سه خط مهم اند؟
{% load bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
نکته: خط اول، تگ های قالب بوت استرپ را لود می کند. خطوط بعدی لینک استایل و اسکریپت را می سازند.
حذف استایل قدیمی (اختیاری)
اگر CSS سفارشی قبلی داری، موقتاً حذف کن. سپس نتیجه خام را ببین. بعد، کلاس های بوت استرپ را کم کم اضافه کن.
جمع بندی سریع
- وارد محیط مجازی شو.
- پکیج
django-bootstrap-v5را نصب کن. - آن را به
INSTALLED_APPSاضافه کن. - در قالب، تگ های بوت استرپ را لود کن.
- کلاس ها را در HTML استفاده کن.
برای آدرس های خوانا، صفحه افزودن فیلد slug را ببین. همچنین تگ های قالب را در مرجع Template Tags مرور کن.