Django+boostrap 美化admin后台的操作


Posted in Python onMarch 11, 2020

工具:Pycharm,Django1.11.9.

1.下载django_admin_bootstrapped

pip install django-admin-bootstrapped

2.打开django项目目录下的settings.py文件,如图添加内容,必须放在django本身的django.contrib.admin前面。

Django+boostrap 美化admin后台的操作

3.运行项目,通过浏览器打开页面,即可看到美化后的admin后台了。

Django+boostrap 美化admin后台的操作

将后台中的英文修改为中文,可以看到只有右上角的英文 "Recent actions",和中间有一个'Applications'。

现在我们来修改它们。

在django_admin_bootstrapped/templates/admin/base.html 中找到"Recent actions",修改为"最近的动作"。

Django+boostrap 美化admin后台的操作

在同一目录下的index.html中找到"Applications",换成"应用程序"。

Django+boostrap 美化admin后台的操作

重新运行项目,进浏览器就OK了。

Django+boostrap 美化admin后台的操作

补充知识:几步带你实现django中引入bootstrap,后端程序员有福了

bootstrap在flask框架中引入很简单,但是由于django是一个封闭式的框架,所以在运用的时候,

有点小麻烦,不过也就几步的事情,多点耐心

下载bootstrap

下载地址:https://v3.bootcss.com/getting-started/#download,选择第二个,下载带有源码的bootstrap,只能通过这种方式(django是封闭的)

下载的目录结构:

Django+boostrap 美化admin后台的操作

dist文件是bootstrap的核心文件

创建一个简单Demo项目,这是我的项目

Django+boostrap 美化admin后台的操作

注意:在根项目下创建一个static目录,再在static下创建一个bootstrap文件夹,找到并打开setting.py输入如下;(输入到该文件的末尾即可,注意符号)

STATIC_URL = '/static/'

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

找到并打开view.py补充输入如下

#视图函数,返回index.html页面 
from django.http import HttpResponse 
from django.shortcuts import render 
def index(request): 
  return render(request, 'index.html')

找到并打开urls.py补充输入如下

from app import view
from django.conf.urls import url
 
urlpatterns = [
  url(r'^$', view.index),
]

上面我们已经做到把视图函数写好并且加到路由里面,接下来开始放置bootstrap了

打开一开始下载解压后的文件,找到dist文件夹,将里面的的3个文件夹css,fonts,js进行复制

在untitled/static/下新建文件夹bootstrap,将刚才复制的3个文件夹复制到里面,

从一开始下载的bootstrap的解压文件找到docs/examples里面选择一个本次测试的模板,本次我们选择docs/examples/blog/下的index.html,复制粘贴到mydjango/testdj/templates/下,然后改名为base.html,然后用编辑器打开

找到

<link href="../../dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

改为

<link href="/static/bootstap/css/bootstrap.css" rel="external nofollow" rel="stylesheet">

找到

<link href="blog.css" rel="external nofollow" rel="stylesheet">

改为

<link href="/static/bootstrap/css/blog.css" rel="external nofollow" rel="stylesheet">

找到

<script src="../../dist/js/bootstrap.min.js"></script>

改为

<script src="/static/bootstrap/js/bootstrap.js"></script>

我们更改成了自己的路径,可以更好的适应我们的项目结构

找到我们那会下载的/docs/examples/blog/下的blog.css复制粘贴一份到mydjango/testdj/testdj/static/bootstrap/css/里面

然后我们写一个自己的index.html(注意别搞混了)

里面只需要写

{% extends ‘base.html'%}(这是对页面的继承)

ok,运行django, 在django中输入url就可以看到一个博客模板了

下面是我的目录结构

Django+boostrap 美化admin后台的操作

总结: 下载下来的bootstrap包含了很多网页模板,比如导航条, 博客模板等等 以后想使用其他的模板只需要下面几步:

粘贴模板到自己项目的templates下, 到D:\bootstrap\bootstrap-3.3.7\docs\examples\ 下面的模板粘贴到 项目的templates下建立一个base模板

创建static,到setttings中设置检索路径,在这之前还需要把 D:\bootstrap\bootstrap-3.3.7\dist下的的三个文件夹(css, js, fonts)粘贴到static下的bootstrap()自己新建的)下面,

把bootstrap模板中的css文件复制到 static\bootstrap\css 文件中

在templates\base.html中 对css和js 外联路径进行更改,其实就是把原先从网上连接改为本地文件的连接

ok

以上这篇Django+boostrap 美化admin后台的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
浅谈python中的数字类型与处理工具
Aug 02 Python
Python实现GUI学生信息管理系统
Apr 05 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
Feb 01 Python
python如何为被装饰的函数保留元数据
Mar 21 Python
python微信公众号之关键词自动回复
Jun 15 Python
python3 unicode列表转换为中文的实例
Oct 26 Python
Pycharm如何打断点的方法步骤
Jun 13 Python
python 读写文件包含多种编码格式的解决方式
Dec 20 Python
Python : turtle色彩控制实例详解
Jan 19 Python
python如何调用字典的key
May 25 Python
解析Python 偏函数用法全方位实现
Jun 26 Python
Python torch.flatten()函数案例详解
Aug 30 Python
Windows 下python3.8环境安装教程图文详解
Mar 11 #Python
django admin后管定制-显示字段的实例
Mar 11 #Python
Python 3.8 新功能来一波(大部分人都不知道)
Mar 11 #Python
屏蔽Django admin界面添加按钮的操作
Mar 11 #Python
在Mac中PyCharm配置python Anaconda环境过程图解
Mar 11 #Python
python实现飞机大战项目
Mar 11 #Python
Django 自定义权限管理系统详解(通过中间件认证)
Mar 11 #Python
You might like
从手册去理解分析PHP session机制
2011/07/17 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
python实现简单爬虫功能的示例
2016/10/24 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
解析python实现Lasso回归
2019/09/11 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
客户代表自我评价范例
2013/09/24 职场文书
法学院方阵解说词
2014/01/29 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书