دسته ‌بندی آموزش ها
برچسب ها

نحوه افزودن Bootstrap 5 به پروژه Django

django add bootstrap 5
20 آبان 1403

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

یکی از راه‌های استفاده از Bootstrap در Django این است که از طریق CDN به کتابخانه‌های آن دسترسی پیدا کنید. این روش سریع‌ترین و ساده‌ترین راه برای ادغام Bootstrap با پروژه شما است.

ابتدا باید فایل قالب HTML خود را تنظیم کنید تا به فایل‌های CSS و JS Bootstrap 5 متصل شود. به عنوان مثال، می‌توانید فایل اصلی قالب خود را به صورت زیر تغییر دهید.

به همین ترتیب، یک راه دیگر هم استفاده از بست‌هایی است که به شما امکان می‌دهد Bootstrap را به صورت محلی در پروژه خود دانلود و استفاده کنید.

نمونه کد


<!-- در فایل base.html پروژه خود -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Using Bootstrap</title>
    <!-- لینک به CSS Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-..." crossorigin="anonymous">
</head>
<body>
    <h1>سلام دنیا</h1>
    <!-- کد صفحه شما -->

    <!-- اسکریپت‌های جاوااسکریپت Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-..." crossorigin="anonymous"></script>
</body>
</html>

توضیحات خط به خط کد

<!DOCTYPE html>
این خط تعیین می‌کند که سند HTML از نوع HTML5 است.
<html lang="en">
عنصر ریشه HTML را مشخص می‌کند و زبان را به انگلیسی قرار می‌دهد.
<meta charset="UTF-8">
مجموعه کاراکتر UTF-8 را برای صفحه HTML تنظیم می‌کند.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
اطلاعات نمای دستگاه را تنظیم می‌کند تا اطمینان حاصل شود که صفحه به خوبی روی دستگاه‌های مختلف نمایش داده می‌شود.
<title>Project Using Bootstrap</title>
عنوان صفحه وب را تنظیم می‌کند که در تب مرورگر نمایش داده می‌شود.
<link href="...">
لینک به فایل CSS سی‌دی‌ان Bootstrap برای افزودن استایل‌های Bootstrap به صفحه.
<h1>سلام دنیا</h1>
این یک عنوان را در صفحه وب نشان می‌دهد.
<script src="...">
لینک به فایل‌های جاوااسکریپت Bootstrap برای افزودن قابلیت اسکریپت‌های تعاملی Bootstrap به صفحه.

سوالات متداول

؟

چگونه Bootstrap را از طریق CDN به پروژه Django اضافه کنم؟

؟

آیا می‌توان Bootstrap را به صورت محلی استفاده کرد؟

مطالب مرتبط