Веб-фреймворк Django упрощает рендеринг HTML с помощью механизма шаблонов Django. Однако для стиля по умолчанию на HTML-страницах обычно требуется Фреймворк каскадных таблиц стилей (CSS), например Bootstrap, чтобы дизайн выглядел достойно. В этом руководстве для начинающих мы будем использовать Bootstrap Сеть доставки контента (CDN) чтобы быстро добавить Bootstrap к отображаемой HTML-странице.
Вот как будет выглядеть стиль элемента
Требования к руководству
В этом руководстве мы будем использовать следующие зависимости: который мы установим буквально через мгновение. Убедитесь, что у вас также установлен Python 3, желательно установить версию 3.7 или новее , в вашей среде:
Мы будем использовать следующие зависимости, чтобы завершить это руководство:
- Веб-фреймворк Django,
- версия 3.0.8
Весь код в этом сообщении в блоге доступен с открытым исходным кодом по лицензии MIT. на GitHub в разделе каталог bootstrap-4-django-template репозитория blog-code-examples . Используйте исходный код по своему усмотрению для своих собственных проектов.
Настроена среда разработки
Перейдите в каталог, в котором вы храните свой Python виртуальные среды. Создайте новый virtualenv для этого проекта, используя следующие команда.
Запустите проект Django, создав новый виртуальная среда используя следующую команду. Рекомендую использовать отдельный каталог например ~/venvs/ (тильда – это ярлык для домашней страницы вашего пользователя каталог), чтобы вы всегда знали, где находятся все ваши виртуальные файлы располагается.
python3 -m venv ~/venvs/djbootstrap4
Активируйте virtualenv с помощью сценария оболочки activate :
source ~/venvs/djbootstrap4/bin/activate
После выполнения указанной выше команды в командной строке появится измените так, чтобы имя virtualenv добавлялось к исходный формат командной строки, поэтому, если ваша подсказка просто $ , теперь он будет выглядеть следующим образом:
(djbootstrap4) $
Помните, что вы должны активировать виртуальный сервер в каждом новом терминале. окно, в котором вы хотите использовать зависимости в файле virtualenv.
Теперь мы можем установить Django пакет в активированный, но в остальном пустой файл virtualenv.
pip install django==3.0.8
Найдите вывод, подобный следующему, чтобы убедиться в правильности пакеты были установлены правильно из PyPI.
Collecting django Using cached https://files.pythonhosted.org/packages/ca/ab/5e004afa025a6fb640c6e983d4983e6507421ff01be224da79ab7de7a21f/Django-3.0.8-py3-none-any.whl Collecting sqlparse>=0.2.2 (from django) Using cached https://files.pythonhosted.org/packages/85/ee/6e821932f413a5c4b76be9c5936e313e4fc626b33f16e027866e1d60f588/sqlparse-0.3.1-py2.py3-none-any.whl Collecting asgiref~=3.2 (from django) Using cached https://files.pythonhosted.org/packages/d5/eb/64725b25f991010307fd18a9e0c1f0e6dff2f03622fc4bcbcdb2244f60d6/asgiref-3.2.10-py3-none-any.whl Collecting pytz (from django) Using cached https://files.pythonhosted.org/packages/4f/a4/879454d49688e2fad93e59d7d4efda580b783c745fd2ec2a3adf87b0808d/pytz-2020.1-py2.py3-none-any.whl Installing collected packages: sqlparse, asgiref, pytz, django Successfully installed asgiref-3.2.10 django-3.0.8 pytz-2020.1 sqlparse-0.3.1
Теперь мы можем приступить к написанию кода приложения, поскольку у нас есть все установлены необходимые зависимости.
Сборка нашего приложения
Начнем писать наше приложение.
Мы можем использовать инструмент Django django-admin для создания шаблонная структура кода для начала нашего проекта. Перейдите в каталог, в котором вы разрабатываете свои приложения. За Например, я обычно использую /Users/matt/devel/py/ для всех моих Проекты Python. Затем выполните следующую команду, чтобы запустить Django проект с именем djbootstrap4 :
django-admin.py startproject djbootstrap4
Обратите внимание, что в этом руководстве мы используем одно и то же имя для обоих virtualenv и каталог проекта Django, но они могут быть разные имена, если вы предпочитаете это для организации ваших собственных проектов.
Команда django-admin создает каталог с именем djbootstrap4 вместе с несколькими подкаталогами, с которыми вы должны быть знакомы если вы ранее работали с Django.
Поменяйте каталоги в новый проект.
cd djbootstrap4
Создайте новое приложение Django в djbootstrap4 .
python manage.py startapp bootstrap4
Django создаст новую папку с именем bootstrap4 для проекта. Мы должны обновить URL-адреса, чтобы приложение было доступно, прежде чем писать наш код views.py .
Откройте djbootstrap4/djbootstrap4/urls.py . Добавьте выделенное строки, чтобы преобразователь URL проверил приложение bootstrap4 для дополнительных маршрутов для соответствия URL-адресам, которые запрашиваются это приложение Django.
# djbootstrap4/djbootstrap4/urls.py
from django.conf.urls import include
from django.contrib import admin
from django.urls import path
urlpatterns = [
path('', include('bootstrap4.urls')),
path('admin/', admin.site.urls),
]Сохраните djbootstrap4/djbootstrap4/urls.py и откройте djbootstrap4/djbootstrap4/settings.py . Добавьте приложение bootstrap4 в settings.py , вставив выделенная строка:
# djbootstrap4/djbootstrap4/settings.py
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'bootstrap4',
]Убедитесь, что вы изменили значения по умолчанию DEBUG и SECRET_KEY значения в settings.py перед развертыванием любого кода в производственной среде. Безопасный ваше приложение правильно с информацией из Django контрольный список производственного развертывания чтобы вы не добавляли свой проект в список взломанных приложений В интернете.
Сохраните и закройте settings.py .
Затем перейдите в каталог djbootstrap4/bootstrap4 . Создайте новый файл с именем urls.py , содержащий маршруты для приложения bootstrap4 .
Добавьте все эти строки в пустой djbootstrap4/bootstrap4/urls.py файл.
# djbootstrap4/bootstrap4/urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'', views.bootstrap4_index, name="index"),
]Сохраните djbootstrap4/bootstrap4/urls.py . открыто djbootstrap4/bootstrap4/views.py , чтобы добавить следующие две выделенные строки. Вы можете оставить шаблонный комментарий «# Создайте здесь свои просмотры». или удалите, как обычно.
# djbootstrap4/bootstrap4/views.py
from django.shortcuts import render
def bootstrap4_index(request):
return render(request, 'index.html', {})Затем создайте каталог для файлов шаблонов с именем templates в разделе каталог приложения djmaps/maps .
mkdir templates
Создайте новый файл с именем index.html в djbootstrap4/bootstrap4/templates , содержащий после разметки языка шаблонов Django.
First step for bootstrap4
Hello, world!
Мы можем протестировать эту статическую страницу, чтобы убедиться, что весь наш код исправьте, прежде чем мы начнем добавлять мясо функциональности в проект. Перейдите в базовый каталог вашего проекта Django где находится файл manage.py . Выполнить разработку сервер с помощью следующей команды:
python manage.py runserver
Сервер разработки Django не должен запускаться без каких-либо проблем, кроме предупреждение о неприменении миграции.
Watching for file changes with StatReloader Performing system checks... System check identified no issues (0 silenced). You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. Run 'python manage.py migrate' to apply them. July 05, 2020 - 10:59:58 Django version 3.0.8, using settings 'djbootstrap4.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C.
Откройте веб-браузер и перейдите по адресу «http://localhost: 8000».
Когда наше базовое приложение работает, теперь мы можем добавить Bootstrap.
Интеграция Bootstrap
Пришло время добавить Bootstrap в шаблон, чтобы мы могли использовать его стиль.
Откройте резервную копию djbootstrap4/bootstrap4/templates/index.html и добавить или изменить следующие выделенные строки, которые очень похоже на то, что вы найдете в Введение в Bootstrap :
bootstrap4
Hello, world!