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 相关文章推荐
Python3基础之基本运算符概述
Aug 13 Python
详解Python的collections模块中的deque双端队列结构
Jul 07 Python
Python 列表(List) 的三种遍历方法实例 详解
Apr 15 Python
浅谈python socket函数中,send与sendall的区别与使用方法
May 09 Python
python使用SMTP发送qq或sina邮件
Oct 21 Python
python实现对excel进行数据剔除操作实例
Dec 07 Python
搭建python django虚拟环境完整步骤详解
Jul 08 Python
flask应用部署到服务器的方法
Jul 12 Python
python自动化实现登录获取图片验证码功能
Nov 20 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
Oct 15 Python
python自动化调用百度api解决验证码
Apr 13 Python
Python 发送SMTP邮件的简单教程
Jun 24 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断点续传之如何分割合并文件
2014/03/22 PHP
YII框架关联查询操作示例
2019/04/29 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
input的focus方法使用
2010/03/13 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
Python实现CET查分的方法
2015/03/10 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
django使用JWT保存用户登录信息
2020/04/22 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
联想C++笔试题
2012/06/13 面试题
小班下学期评语
2014/05/04 职场文书
门店业绩提升方案
2014/06/08 职场文书
应届毕业生自荐书
2014/06/18 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript
Python进行区间取值案例讲解
2021/08/02 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript