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回调函数的使用方法
Jan 23 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
Apr 05 Python
python批量提取word内信息
Aug 09 Python
Python制作钉钉加密/解密工具
Dec 07 Python
python实现windows下文件备份脚本
May 27 Python
对Tensorflow中的矩阵运算函数详解
Jul 27 Python
24式加速你的Python(小结)
Jun 13 Python
python 计算两个列表的相关系数的实现
Aug 29 Python
python关于变量名的基础知识点
Mar 03 Python
Python importlib动态导入模块实现代码
Apr 16 Python
Python正则re模块使用步骤及原理解析
Aug 18 Python
JAVA SpringMVC实现自定义拦截器
Mar 16 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
ThinkPHP中的关联模型注意点
2014/06/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
javascript定时保存表单数据的代码
2011/03/17 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python如何对齐字符串
2020/07/30 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
为什么要用EJB
2014/04/17 面试题
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
大学生励志演讲稿
2014/04/25 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
见习报告格式要求
2014/11/04 职场文书
《绝招》教学反思
2016/02/20 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers