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实现备份文件实例
Sep 16 Python
Python3实现从指定路径查找文件的方法
May 22 Python
Python3使用requests包抓取并保存网页源码的方法
Mar 15 Python
Windows下python2.7.8安装图文教程
May 26 Python
Python从零开始创建区块链
Mar 06 Python
解决python nohup linux 后台运行输出的问题
May 11 Python
Python实现的knn算法示例
Jun 14 Python
浅谈pycharm出现卡顿的解决方法
Dec 03 Python
Python将列表数据写入文件(txt, csv,excel)
Apr 03 Python
python pytest进阶之conftest.py详解
Jun 27 Python
Django通过dwebsocket实现websocket的例子
Nov 15 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
Jan 28 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
5.PHP的其他功能
2006/10/09 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
jquery操作cookie插件分享
2014/01/14 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
Python中List.count()方法的使用教程
2015/05/20 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
简单了解Python生成器是什么
2019/07/02 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
大学生志愿者感言
2014/01/15 职场文书
一年级家长会邀请函
2014/01/25 职场文书
活动总结格式范文
2014/04/26 职场文书
旅游节目策划方案
2014/05/26 职场文书
护理目标管理责任书
2014/07/25 职场文书
争做文明公民倡议书
2014/08/29 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
城管个人总结
2015/02/28 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
AngularJS实现多级下拉框
2022/03/25 Javascript