Django UI美化

最新推荐文章于 2025-06-20 09:00:01 发布

骑上单车去旅行

最新推荐文章于 2025-06-20 09:00:01 发布

阅读量558

点赞数 17

CC 4.0 BY-SA版权

分类专栏： Django 文章标签： django ui python

使用前端框架
- Bootstrap
  - 安装与集成：
    - 可以通过多种方式安装Bootstrap。一种常见的方法是使用包管理器，如npm或yarn。在项目目录下运行npm install bootstrap或yarn add bootstrap。然后，将Bootstrap的CSS和JavaScript文件链接到Django模板中。在base.html模板（假设这是项目的基础模板）中，在head标签内添加CSS链接，在body标签结束前添加JavaScript链接。
```
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Django App</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
    {% block content %}{% endblock %}
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
```
    - 注意，这里假设bootstrap.min.css和bootstrap.min.js文件已经被收集到static/css和static/js目录中。如果没有，可以通过复制文件或者配置构建工具来实现。
  - 使用Bootstrap组件进行页面布局和样式设计：
    - Bootstrap提供了丰富的组件，如导航栏、卡片、按钮等。例如，创建一个简单的导航栏：
```
<nav class="navbar navbar-expand-lg navbar - light bg - light">
    <a class=
```