Django+boostrap 美化admin后台的操作
作者:Mr_blueD 发布时间:2022-02-26 16:16:21
工具:Pycharm,Django1.11.9.
1.下载django_admin_bootstrapped
pip install django-admin-bootstrapped
2.打开django项目目录下的settings.py文件,如图添加内容,必须放在django本身的django.contrib.admin前面。
3.运行项目,通过浏览器打开页面,即可看到美化后的admin后台了。
将后台中的英文修改为中文,可以看到只有右上角的英文 "Recent actions",和中间有一个'Applications'。
现在我们来修改它们。
在django_admin_bootstrapped/templates/admin/base.html 中找到"Recent actions",修改为"最近的动作"。
在同一目录下的index.html中找到"Applications",换成"应用程序"。
重新运行项目,进浏览器就OK了。
补充知识:几步带你实现django中引入bootstrap,后端程序员有福了
bootstrap在flask框架中引入很简单,但是由于django是一个封闭式的框架,所以在运用的时候,
有点小麻烦,不过也就几步的事情,多点耐心
下载bootstrap
下载地址:https://v3.bootcss.com/getting-started/#download,选择第二个,下载带有源码的bootstrap,只能通过这种方式(django是封闭的)
下载的目录结构:
dist文件是bootstrap的核心文件
创建一个简单Demo项目,这是我的项目
注意:在根项目下创建一个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就可以看到一个博客模板了
下面是我的目录结构
总结: 下载下来的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
来源:https://blog.csdn.net/Mr_blueD/article/details/79826970
猜你喜欢
- 据国外媒体报道,相较于IE8浏览器,微软最新一代浏览器IE9的最大改进就是硬件加速HTML5。微软承诺,通过利用IE9中的硬件加速功能,开发
- 客户端调用XMLHTTP的过程很简单,只有5个步骤: 1、创建XMLHTTP对象 2、打开与服务端的连接,同时定义指令发送方式,服务网页(U
- 很多网站现在都有使用QQ作为在线客服工具,我们点击它可以很方便的和网站人员联系,本站为你整理了在网站上使用QQ在线客服的代码,共13种风格,
- 一,fso.GetFile提取文件相应的 File 对象1,getfile.asp<%whichfile=Serv
- php 如何获取请求的xml数据,对方通过http协议post提交过来xml数据,php如何获取到这些数据呢?<?php $xml_d
- 工厂模式(Factory Pattern)是什么工厂模式是一种创建型模式,它提供了一种创建对象的最佳方式。在工厂模式中,我们在创建对象时不会
- 通常,在完成了一件网页设计后,设计师的无知都会显露无遗而备受指责。他们把创建网页代码的繁重工作都留给了程序员们。这种现象不只出现在网络开发行
- 有的时候,我们在网页中会用到复选框,也就是多选框,当用户提交输入信息的时候我们会获取复选框的内容,然后保存到数据库中,如经常用到的是用户输入
- mysql数据库数据表和数据表关联--问题??用户数据表user 字词作品数据表article 短信 message外键ID 主键,之间的关
- 前两天看见有人问静态网页加密问题,就写了这个代码稍微有些长,解释一下思路:加密时:先把用户的密钥A用md5加密为B,然后用B异或源文件S0得
- 调用 <script language="javascript" src="xxx.asp?m
- SQLserver 2000中出现“指定的服务并未以已安装的服务存在" 解决方案一、将计算机名改成大写。二、将sql server
- 用asp程序进行网页设计,大多因为需要访问数据库,然后再将数据显示到页面,如果数据很多的话,页面的访问速度也就变慢了,为了解决这个问题,可以
- 代码如下:< % Set fso=Server.CreateObject("Scripting
- 1.INPUT和图片按钮对齐:<form method="post" action="
- 1.用CSS实现布局让我们一起来做一个页面,首先,我们需要一个布局。请使用CSS控制3个div,实现如下图的布局。考察应试者的基本布局知识—
- 1.MS SCRIPT ENCODE基本上没什么用了,一段JS就可以破解2.封装成DLL比较可行的方法,有通过VB封装成DLL的例子,而且无
- 通常的聊天室所采用的程序,也就是Chat程序了,其基本结构原理是不会采用到数据库的。那究竟采用什么技术呢?我们知道ASP变量当中Sessio
- PDOStatement::bindValuePDOStatement::bindValue — 把一个值绑定到一个参数(PHP 5 >
- 内容简介展示如何给图像叠加不同等级的椒盐噪声和高斯噪声的代码,相应的叠加噪声的已编为对应的类,可实例化使用。以下主要展示自己编写的:加噪声的