Django 中的 Bootstrap 5 - Python

介绍

Bootstrap 是目前世界上最受欢迎的前端框架之一，其提供了大量的样式、组件和工具，使得网页开发变得更加快速和简单，广受开发者的青睐。而 Django 则是 Python 下最流行的 Web 应用程序框架，可以高效地帮助开发者构建出高质量的 Web 应用。因此，将两者结合起来，可以使开发者在 Django 项目中更加方便地使用 Bootstrap 的特性，提高开发效率。

安装

在 Django 项目中使用 Bootstrap，需要安装相应的 Bootstrap 库。目前最新的 Bootstrap 版本是 5.1.0，可以通过 pip 安装。在终端中执行以下命令：

pip install django-bootstrap5

安装完成后，在项目的 settings.py 文件中添加以下配置：

INSTALLED_APPS = [
    # ...
    'bootstrap5',
    # ...
]

TEMPLATES = [
    {
        # ...
        'OPTIONS': {
            'context_processors': [
                # ...
                'django.template.context_processors.request',
                # ...
            ],
        },
    },
]

使用

在 Django 中使用 Bootstrap 非常简单，在 HTML 中直接引用 Bootstrap 提供的样式和组件即可。Bootstrap5 库所携带的组件较多，本文只列出其中的一部分：

按钮

在模板文件中，使用以下代码添加按钮：

<button class="btn btn-primary">Primary</button>

表单

使用以下代码添加表单：

<form method="post">
    {% csrf_token %}
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">Email address</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

轮播图

使用以下代码添加轮播图：

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__480.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
</div>

结论

Bootstrap 是一个功能强大的前端框架，而 Django 则是一个高效的 Web 应用程序框架。两者结合可以使开发者在 Django 项目中更加方便地使用 Bootstrap 的特性，提高开发效率。安装和使用 Bootstrap5 库非常简单，而携带的组件较多，可以快速地构建出漂亮的网站。