Skip to Content

راهنمای کامل افزودن Bootstrap 5 و آیکون‌های آن به Django به صورت دستی (بدون استفاده از افزونه‌های شخص ثالث)

مقدمه

استفاده از Bootstrap 5 در پروژه‌های Django به شما امکان می‌دهد ظاهری حرفه‌ای و واکنش‌گرا (Responsive) برای وب‌سایت خود ایجاد کنید. در این مقاله، دو روش اصلی برای افزودن Bootstrap 5 به پروژه Django بدون استفاده از افزونه‌های خارجی را بررسی می‌کنیم:

۱. استفاده از لینک‌های CDN در فایل base.html.

۲. دانلود فایل‌های استاتیک و قرار دادن آن‌ها در پوشه static پروژه.

همچنین نحوه افزودن آیکون‌های Bootstrap را نیز توضیح خواهیم داد.

بخش ۱: افزودن Bootstrap 5 با استفاده از CDN

این روش ساده‌ترین راه برای شروع است و نیازی به دانلود فایل‌ها ندارد.

مراحل اجرا:

۱. افزودن لینک‌های CDN به base.html:

در فایل base.html (که معمولاً در پوشه templates قرار دارد)، کد زیر را در بخش <head> قرار دهید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Django Site{% endblock %}</title>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

    {% block extra_css %}{% endblock %}
</head>
<body>

    {% block content %}{% endblock %}

    <!-- Bootstrap 5 JS Bundle (Popper included) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>

Bootstrap را از طریق CDN بارگذاری می‌کند.

۲. استفاده از کلاس‌های Bootstrap در تمپلیت‌ها:

پس از افزودن لینک‌ها، می‌توانید از کلاس‌های Bootstrap در هر بخش از تمپلیت‌ها استفاده کنید. مثال:

<div class="container mt-5">
    <button class="btn btn-primary">دکمه نمونه</button>
</div>
  • مزیت: سریع و بدون نیاز به مدیریت فایل‌های استاتیک.
  • عیب: وابستگی به اتصال اینترنت (اگر CDN قطع شود، استایل‌ها از بین می‌روند).

بخش ۲: افزودن Bootstrap 5 با دانلود فایل‌های استاتیک

این روش برای محیط‌های تولید (Production) یا زمانی که می‌خواهید کنترل کامل روی فایل‌ها داشته باشید، مناسب است.

مراحل اجرا:

۱. دانلود فایل‌های Bootstrap 5:

  • به وبسایت رسمی Bootstrap بروید و آخرین نسخه Compiled CSS و JS را دانلود کنید.
  • فایل زیپ را اکسترکت کرده و پوشه‌های css و js را استخراج کنید.

۲. ساختار پوشه static:

  • در ریشه پروژه Django (همان پوشه‌ای که manage.py قرار دارد)، پوشه static ایجاد کنید.
  • پوشه‌های css و js دانلود شده را داخل static قرار دهید.
پروژه_شما/  
├── static/  
│   ├── css/  
│   │   └── bootstrap.min.css  
│   └── js/  
│       └── bootstrap.bundle.min.js

۳. تنظیمات settings.py:

مطمئن شوید تنظیمات زیر در settings.py وجود دارد:

STATIC_URL = '/static/'  
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

۴. لینک‌دهی به فایل‌ها در base.html:

{% load static %}
<head>
    <!-- لینک CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    
    <!-- لینک JavaScript -->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</head>

۵. **جمع‌آوری فایل‌های استاتیک (برای Production)**: دستور زیر را اجرا کنید تا فایل‌ها در پوشه `STATIC_ROOT` جمع‌آوری شوند:

python manage.py collectstatic

Bootstrap

آیکون‌های Bootstrap به صورت جداگانه ارائه می‌شوند و می‌توان آن‌ها را به دو روش افزود:

روش ۱: استفاده از CDN آیکون‌ها

<!-- در بخش <head> فایل base.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

static

۱. دانلود آیکون‌ها:

۲. ساختار پوشه static:

  • فایل bootstrap-icons.css و پوشه fonts (یا svg) را در static قرار دهید.
پروژه_شما/  
├── static/  
│   ├── css/  
│   │   └── bootstrap-icons.css  
│   └── fonts/  
│       └── bootstrap-icons.woff2

۳. لینک‌دهی در تمپلیت:

<link href="{% static 'css/bootstrap-icons.css' %}" rel="stylesheet">

۴. استفاده از آیکون‌ها:

<i class="bi bi-alarm"></i>

نتیجه‌گیری

با استفاده از این روش‌ها، می‌توانید بدون وابستگی به افزونه‌های خارجی، Bootstrap 5 و آیکون‌های آن را به پروژه Django خود اضافه کنید. روش CDN برای توسعه سریع مناسب است، در حالی که روش استاتیک کنترل بیشتری را در محیط‌های Production فراهم می‌کند.

نکات تکمیلی:

  • همیشه از آخرین نسخه Bootstrap استفاده کنید.
  • در محیط Production، از ابزارهایی مانند WhiteNoise برای مدیریت کارآمد فایل‌های استاتیک کمک بگیرید.
  • برای تست واکنش‌گرایی، از ابزارهای توسعه‌دهنده مرورگر (DevTools) استفاده کنید.

با دنبال کردن این راهنما، می‌توانید ظاهر وب‌سایت Django خود را به سرعت ارتقا دهید!



راهنمای کامل افزودن Bootstrap 5 و آیکون‌های آن به Django به صورت دستی (بدون استفاده از افزونه‌های شخص ثالث)
Administrator 11 فوریهٔ 2025
Share this post
برچسب‌ها
Our blogs
بایگانی

راه‌اندازی سرور Git روی سرور لینوکسی: راهنمای گام به گام