在 Web 开发中，功能实现只是第一步，良好的用户体验和美观的界面同样重要。本文将介绍如何在已有的 Django 学生管理系统基础上进行样式优化，通过 Bootstrap 和自定义 CSS 让系统界面焕然一新。
项目背景
我们已完成一个基础的学生管理系统，包含用户注册、登录、注销和首页展示功能。但原始界面缺乏样式修饰，用户体验欠佳。本次优化主要针对前端界面，保持后端功能不变的前提下，让系统更具现代感和易用性。
优化方案概述
- 引入 Bootstrap 框架实现响应式布局
- 设计统一的色彩方案和视觉风格
- 美化表单元素和交互组件
- 添加动画效果提升用户体验
- 优化页面布局和信息展示
具体实现步骤
1. 引入 Bootstrap 框架
在所有模板的<head>标签中添加 Bootstrap CSS 链接，无需下载本地文件，直接使用 CDN：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">2. 设计全局样式
为保持风格统一，我们定义了一套基础样式，应用于整个系统的关键组件：
/* 全局样式：居中布局+背景色 */
body {
background-color: #f5f7fa;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* 卡片阴影和圆角 */
.auth-card {
width: 100%;
max-width: 400px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
border-radius: 12px;
overflow: hidden;
}
/* 按钮样式增强 */
.btn-primary {
background-color: #3b82f6;
border: none;
padding: 10px 0;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: #2563eb;
transform: translateY(-2px);
}3. 登录页面优化
登录页面是用户接触系统的第一个界面，优化重点包括：
-
使用卡片布局突出登录表单
-
美化输入框和按钮
-
添加错误提示样式
-
增加注册入口
用户登录
<!-- 错误提示 --> {% if form.errors %} <div class="alert alert-danger alert-dismissible fade show" role="alert"> 用户名或密码错误，请重试！ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> {% endif %} <!-- 登录表单 --> <form method="post"> {% csrf_token %} <!-- 用户名输入框 --> <div class="mb-4"> <label for="{{ form.username.id_for_label }}" class="form-label">账号</label> {{ form.username.errors }} {{ form.username }} </div> <!-- 密码输入框 --> <div class="mb-5"> <label for="{{ form.password.id_for_label }}" class="form-label">密码</label> {{ form.password.errors }} {{ form.password }} </div> <!-- 按钮组 --> <div class="d-grid gap-3"> <button type="submit" class="btn btn-primary">登录</button> <a href="{% url 'register' %}" class="btn btn-secondary text-center">注册账号</a> </div> </form> </div>4. 表单组件美化
通过 Django 表单的 widget 属性为输入框添加样式类，实现表单美化：
# accounts/forms.py class CustomLoginForm(AuthenticationForm): # 用户名输入框 username = forms.CharField( widget=forms.TextInput( attrs={ 'class': 'form-control px-4 py-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500', 'placeholder': '请输入账号' } ) ) # 密码输入框 password = forms.CharField( widget=forms.PasswordInput( attrs={ 'class': 'form-control px-4 py-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500', 'placeholder': '请输入密码' } ) )5. 注册页面优化
注册页面在保持与登录页风格一致的基础上，针对多字段表单做了特殊处理：
-
增加表单字段说明文本
-
优化字段间距和排列
-
保持与登录页的视觉一致性
<label for="{{ form.username.id_for_label }}" class="form-label">账号</label> {{ form.username.errors }} {{ form.username }}必填。150个字符或更少。字母、数字和@/./+/-/_字符。
6. 首页优化
首页作为登录后的展示页面，主要优化点：
-
添加导航栏增强系统辨识度
-
设计欢迎卡片展示用户信息
-
优化登录 / 未登录状态的展示逻辑
-
添加退出登录功能按钮
优化前后对比
优化前
- 原生 HTML 表单，无样式
- 布局混乱，元素排列松散
- 无响应式设计，适配性差
- 缺乏视觉层次和交互反馈
优化后
- 统一的设计语言和视觉风格
- 卡片式布局增强内容层次感
- 响应式设计适配各种设备
- 按钮和输入框有交互反馈
- 清晰的视觉引导和操作流程
总结
本次样式优化主要通过以下技术手段实现：
- 利用 Bootstrap 提供的基础样式和布局工具
- 自定义 CSS 扩展样式满足特定需求
- 通过 Django 表单的 widget 属性注入样式类
- 使用模板继承和组件化思想保持风格一致
这些优化不需要改变后端逻辑，却能显著提升用户体验。在实际开发中，前端样式优化是一个持续迭代的过程，需要结合用户反馈不断调整和改进。
通过本次优化，我们的学生管理系统不仅功能完整，更具备了现代 Web 应用的视觉美感和易用性，为后续功能扩展奠定了良好的基础。
效果图
登录页面
注册页面
-