Django 用户管理系统

最新推荐文章于 2024-05-06 11:53:16 发布

论搬砖的艺术

最新推荐文章于 2024-05-06 11:53:16 发布

阅读量707

点赞数

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

本文链接：https://blog.csdn.net/qq_53817374/article/details/126899827

版权

Django 专栏收录该内容

24 篇文章 4 订阅

订阅专栏

Django 用户管理系统

效果
环境配置
- js文件
- bootstrap插件
前端搭建

效果

环境使用了bootstrap插件和一个js文件。
在这里插入图片描述

环境配置

js文件

下载链接：js,进入网址，crtl+s 下载
然后移入static中的js文件中。
在这里插入图片描述

bootstrap插件

下载链接：bootstrap
解压，然后移入static下plugins文件中。
在这里插入图片描述

前端搭建

引入基本架构

在这里插入图片描述

{% load static %}
<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.css' %}">
    <style>
        .navbar{
            border-radius: 0;
        }
    </style>
</head>
<body>


<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.js'%}"></script>
</body>
</html>

访问官网引入模板删改

官网地址：bootstrap
删除不需要的输入框，多余的导航条等。
在这里插入图片描述

引入面板修改

在这里插入图片描述
选中想要的图标，复制html文件

最终删改后的效果
在这里插入图片描述
代码：

<div>
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="#">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建部门
            </a>
        </div>

<div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">
          <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
          部门列表
      </div>

      <!-- Table -->
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>1</th>
            <td>销售部</td>
              <td>
                  <a class="btn btn-primary btn-xs">编辑</a>
                  <a class="btn btn-danger btn-xs">删除</a>
              </td>
        </tbody>
      </table>
    </div>

    </div>
</div>