Bootstrap 5 qo‘shish

Django loyihangizda Bootstrap’dan foydalanishning ikkita asosiy usuli bor: kerakli fayllarni yuklab olib, ularni loyihangizga ulash yoki Bootstrap 5 modulini virtual muhitingizga o‘rnatish.

Biz ikkinchi usuldan — Bootstrap 5’ni virtual muhitga o‘rnatishdan foydalanamiz.

Bootstrap 5’ni o‘rnatish

Bootstrap 5 virtual muhitga o‘rnatilishi kerak.

Biz uni ushbu darslikda avvalroq yaratilgan mavjud loyihaga — My Tennis Club loyihasiga o‘rnatamiz.

Buyruqlar oynasini oching, virtual muhit papkasiga o‘ting va virtual muhitni faollashtiring:

Scripts\activate.bat

Virtual muhit ichida bo‘lganingizda, Bootstrap 5’ni quyidagi buyruq bilan o‘rnating:

pip install django-bootstrap-v5

Bu quyidagiga o‘xshash natija beradi:

Collecting django-bootstrap-v5 Downloading django_bootstrap_v5-1.0.11-py3-none-any.whl (24 kB) Requirement already satisfied: django<5.0,>=2.2 in c:\users\your name\myworld\lib\site-packages (from django-bootstrap-v5) (4.1.4) Collecting beautifulsoup4<5.0.0,>=4.8.0 Downloading beautifulsoup4-4.11.1-py3-none-any.whl (128 kB) |████████████████████████████████| 128 kB 6.4 MB/s Requirement already satisfied: tzdata; sys_platform == "win32" in c:\users\your name\myworld\lib\site-packages (from django<5.0,>=2.2->django-bootstrap-v5) (2022.7) Requirement already satisfied: asgiref<4,>=3.5.2 in c:\users\your name\myworld\lib\site-packages (from django<5.0,>=2.2->django-bootstrap-v5) (3.5.2) Requirement already satisfied: sqlparse>=0.2.2 in c:\users\your name\myworld\lib\site-packages (from django<5.0,>=2.2->django-bootstrap-v5) (0.4.3) Collecting soupsieve>1.2 Downloading soupsieve-2.3.2.post1-py3-none-any.whl (37 kB) Installing collected packages: soupsieve, beautifulsoup4, django-bootstrap-v5 Successfully installed beautifulsoup4-4.11.1 django-bootstrap-v5-1.0.11 soupsieve-2.3.2.post1

Sozlamalarni yangilash

Keyingi qadam — bootstrap modulini settings.py faylidagi INSTALLED_APPS ro‘yxatiga qo‘shish:

my_tennis_club/my_tennis_club/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'members',
    'bootstrap5',
]

Endi Bootstrap 5 loyihangizda foydalanishga tayyor!

Eski stillarni olib tashlash

My Tennis Club loyihasida allaqachon stil fayli bor. Uni olib tashlang — shunda stillarsiz Members sahifasi quyidagicha ko‘rinadi:

Bootstrap 5’ni shablonga qo‘shish

Loyihada Bootstrap 5’dan foydalanish uchun avval master.html shabloniga bir necha qator kod qo‘shing:

my_tennis_club/members/templates/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>

Ko‘rib turganingizdek, <head> bo‘limiga quyidagi uchta qatorni qo‘shdik:

  {% load bootstrap5 %}
  {% bootstrap_css %}
  {% bootstrap_javascript %}

Birinchi qator Django’ga ushbu shablonda Bootstrap 5 modulini yuklash kerakligini bildiradi.

Ikkinchi qator bootstrap stil fayliga havola qiluvchi <link> elementini qo‘shadi.

Uchinchi qator kerakli JavaScript fayliga havola qiluvchi <script> elementini qo‘shadi.

Shuningdek, shablondagi HTML elementlariga ham ba’zi o‘zgartirishlar kiritdik, masalan, navigatsiya paneliga bootstrap klasslarini qo‘shdik:

<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>

Agar loyihani hozir ishga tushirsangiz, members sahifasi quyidagicha ko‘rinadi:

Tamom! Endi Bootstrap 5 loyihangizning bir qismi!

Bootstrap 5 haqida ko‘proq ma’lumotni Bootstrap 5 darsligimizdan bilib oling.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish