django messages 实现配合bootsrap 美化弹出框

最新推荐文章于 2026-04-15 13:22:15 发布

原创最新推荐文章于 2026-04-15 13:22:15 发布 · 777 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#django #python #后端

要在Django中使用messages实现配合Bootstrap美化弹出框，可以按照以下步骤进行操作：

首先确保你的Django项目中已经集成了Bootstrap库。

在需要显示消息的视图中，使用Django的messages模块来添加消息。例如：

from django.contrib import messages

def my_view(request):
    messages.success(request, 'This is a success message.')
    messages.error(request, 'This is an error message.')
    return render(request, 'my_template.html')

在模板文件（比如my_template.html）中，使用Bootstrap的样式来美化消息弹出框。可以使用Bootstrap提供的Alert组件来显示消息。例如：

<style>
  .alert {
            position: fixed;
            width:300px;
            top: 40px;
            margin-left: 50%;
            transform:translateX(-50%) ;
            z-index: 9999;
        }

</style>

{% if messages %}
    <div class="alert alert-dismissible fade show" role="alert" id="alertMessage">
        {% for message in messages %}
            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
                <div class="alert alert-danger">{{ message }}</div>
            {% elif message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
                <div class="alert alert-success">{{ message }}</div>
            {% elif message.level == DEFAULT_MESSAGE_LEVELS.WARNING %}
                <div class="alert alert-warning">{{ message }}</div>
            {% elif message.level == DEFAULT_MESSAGE_LEVELS.INFO %}
                <div class="alert alert-info">{{ message }}</div>
            {% endif %}
        {% endfor %}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
{% endif %}

确保在模板文件中引入Bootstrap的CSS和JS文件，以确保样式和功能正常工作。可以在模板文件中添加以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>