Django 网络框架使使用 Django 模板引擎渲染 HTML 变得容易。但是，HTML 页面上的默认样式通常需要一个层叠样式表 (CSS) 框架，例如 Bootstrap，以使设计看起来不错。在这个初学者教程中，我们’将使用 BootstrapContent Delivery Network (CDN) 将 Bootstrap 快速添加到呈现的 HTML 页面。
这是本教程结束时 <h1> 元素样式的样子：
教程要求
在本教程中，我们将使用以下依赖项，稍后我们将安装这些依赖项。确保您的环境中还安装了 Python 3，最好是 3.7 或更新版本：
我们将使用以下依赖项来完成本教程：
- Django 网络框架，版本 3.0.8
这篇博文中的所有代码都可以在 GitHub 上的 blog-code-examples 存储库的 bootstrap-4-django-template 目录下的 MIT 许可下获得开源。根据您自己项目的需要使用源代码。
开发环境搭建
切换到您保存 Python 虚拟环境的目录。使用以下命令为此项目创建一个新的虚拟环境。
通过使用以下命令创建一个新的虚拟环境来启动 Django 项目。我建议使用一个单独的目录，例如 ~/venvs/（波浪号是您用户的 home 目录的快捷方式），以便您始终知道所有 virtualenvs 的位置。
python3 -m venv ~/venvs/djbootstrap4
使用 activate shell 脚本激活 virtualenv：
source ~/venvs/djbootstrap4/bin/activate
执行上述命令后，命令提示符会发生变化，virtualenv 的名称会被添加到原始命令提示符格式的前面，因此如果您的提示符只是$，它现在看起来像下面这样：
(djbootstrap4) $
请记住，您必须在每个要在 virtualenv 中使用依赖项的新终端窗口中激活您的 virtualenv。
我们现在可以将 Djangopackage 安装到已激活但为空的 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 工具创建样板代码结构来启动我们的项目。切换到您开发应用程序的目录。例如，我通常对所有 myPython 项目使用 /Users/matt/devel/py/。然后运行以下命令启动一个名为djbootstrap4的Django项目：
django-admin.py startproject djbootstrap4
请注意，在本教程中，我们对 virtualenv 和 Django 项目目录使用相同的名称，但如果您更喜欢使用不同的名称来组织自己的项目。
django-admin 命令创建一个名为 djbootstrap4 的目录以及几个您应该熟悉的子目录，如果您以前使用过 Django。
将目录更改为新项目。
cd djbootstrap4
在 djbootstrap4 中创建一个新的 Django 应用程序。
python manage.py startapp bootstrap4
Django 将为项目生成一个名为 bootstrap4 的新文件夹。我们应该更新 URL，以便在我们编写 views.py 代码之前可以访问该应用程序。
打开###。添加突出显示的行，以便 URL 解析器将检查 djbootstrap4/djbootstrap4/urls.py 应用程序是否有其他路由与此 Django 应用程序请求的 URL 相匹配。
# 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 以添加以下两个突出显示的行。您可以保留样板注释“# Create your views here”。或像往常一样删除。
# djbootstrap4/bootstrap4/views.py from django.shortcuts import render def bootstrap4_index(request): return render(request, 'index.html', {})
接下来，在 templates app 目录下为您的模板文件创建一个名为 djmaps/maps 的目录。
mkdir templates
在 index.html 中创建一个名为 djbootstrap4/bootstrap4/templates 的新文件，其中包含以下 Django 模板语言标记。
<!DOCTYPE html> <html> <head> <title>First step for bootstrap4</title> </head> <body> <h1>Hello, world!</h1> </body> </html>
我们可以测试这个静态页面，以确保我们所有的代码都是正确的，然后再开始将功能的主体添加到项目中。切换到 manage.py 文件所在的 Django 项目的基本目录。使用以下命令执行开发服务器：
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 添加到模板中，以便我们可以使用它的样式了。
打开 djbootstrap4/bootstrap4/templates/index.html 备份并添加或修改以下突出显示的行，这些行与您在 Bootstrap 介绍指南中找到的内容非常相似：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <title>bootstrap4</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>
<head> 部分中的上述新行添加了几个对 Bootstrap 样式很重要的元元素，并添加了强制性的 Bootstraps 样式表。
我们保留相同的 <h1> 标头，它将自动获取 CSS 样式。然后有 3 个可选脚本元素，它们引入 Bootstrap JavaScript 以获得更高级的功能。我们在本教程中没有使用它们，因为我们只是想快速展示如何使用 CDN，有了这个你可以看到TheBootstrap content docs你接下来要添加到模板中的内容。
在“http://localhost:8000”刷新页面，你应该看到“Hello, world!”更改字体。
如果您看到了，则表示一切正常。
现在怎么办？
我们刚刚通过 CDN 添加了 Bootstrap，因此我们可以在 Django 模板中使用它。这是将 Bootstrap 添加到单个 Djangopage 的绝对最简单的方法，现在您可以使用它做更多的事情。
接下来，尝试一些其他相关的 Django 教程：
- 更多 Bootstrap 资源
- 如何使用 Mapbox 将地图添加到 Django Web 应用程序项目
- 使用 Rollbar 监控 Django 项目
有问题吗？通过 Twitter@fullstackpython 或@mattmakai 与我联系。我也在 GitHub 上使用用户名 mattmakai。如果您在本教程中发现问题或错误，请在 GitHub 上创建源存储库并提交包含修复的拉取请求。
