django css_在应用程序上实现CSS Django的

django css

CSS (Cascade Style Sheets) are used to implement design.

CSS(级联样式表)用于实现设计。

Step 1: Create a Sandbox, Activate it, Install Django and Create Sample Project

步骤1:创建一个沙箱,将其激活,安装Django并创建示例项目

Creating Sandbox

创建沙箱

Django | Implement CSS on an app 1

Activating it

激活它

Django | Implement CSS on an app 2

Installing Django

安装Django

Django | Implement CSS on an app 3

Creating Sample Project [myapp]

创建示例项目[myapp]

Django | Implement CSS on an app 4

Project Structure [myapp]

项目结构[myapp]

Django | Implement CSS on an app 5

Step 2: Add a new folder (i.e. static) in root location (i.e. myapp folder[outer])

步骤2:在根目录(即myapp文件夹[外部])中添加一个新文件夹(即静态)

Django | Implement CSS on an app 6

Step 3: Now go to https://getbootstrap.com/docs/3.3/ and download bootstrap files. I am using bootstrap CSS to style myapp

步骤3:现在转到https://getbootstrap.com/docs/3.3/并下载引导程序文件。 我正在使用Bootstrap CSS样式化myapp

Django | Implement CSS on an app 7

Step 4: Add bootstrap files to static folder

步骤4:将引导文件添加到静态文件夹

Django | Implement CSS on an app 8

Step 5: Add site.css (my own css) to static folder

步骤5:将site.css(我自己的css)添加到静态文件夹

Django | Implement CSS on an app 9
Django | Implement CSS on an app 10

Step 6: Add static folder path to settings.pyof admin app (i.e. myapp[inner])

步骤6:将静态文件夹路径添加到settings.pyof管理应用程序(即myapp [inner])

Django | Implement CSS on an app 11
Django | Implement CSS on an app 12

Step 7: Add a new folder templates for HTML Templates in project folder (i.e. myapp[outer])

步骤7:在项目文件夹(即myapp [outer])中为HTML模板添加新的文件夹模板

Django | Implement CSS on an app 13

Step 8: Add templates location to setting.py in admin app (i.emyapp[inner])

步骤8:在管理应用程式(i.emyapp [inner])中将范本位置新增至setting.py

Django | Implement CSS on an app 14
Django | Implement CSS on an app 15

Step 9: Add a master page (base.html) in templates folder

步骤9:在模板文件夹中添加母版页(base.html)

Django | Implement CSS on an app 16

Sections of Head Tag of base.html

base.html标题标签的部分

Django | Implement CSS on an app 17

Sections of Body Tag of base.html

base.html身体标签部分

Django | Implement CSS on an app 18
Django | Implement CSS on an app 19

Step 10: Now Add child pages (i.e. index.html, home.html etc)

步骤10:现在添加子页面(即index.html,home.html等)

Django | Implement CSS on an app 20

Index.html

Index.html

Django | Implement CSS on an app 21

Home.html

Home.html

Django | Implement CSS on an app 22

About.html

About.html

Django | Implement CSS on an app 23

Contact.html

Contact.html

Django | Implement CSS on an app 24

Gallary.html

Gallary.html

Django | Implement CSS on an app 25

Feedback.html

Feedback.html

Django | Implement CSS on an app 26

Register.html

Register.html

Django | Implement CSS on an app 27

Login.html

Login.html

Django | Implement CSS on an app 28

Step 11: Add a controller file (views.py) to manage views in admin app (i.e. myapp[inner])

步骤11:添加控制器文件(views.py)以管理管理应用程序中的视图(即myapp [inner])

Django | Implement CSS on an app 29

Step 12: Add controller actions (functions) to views.py to manage requests.

步骤12:将控制器动作(功能)添加到views.py以管理请求。

Django | Implement CSS on an app 30

Step 13: Add new url to urls.py in admin app (i.e. myapp[inner])

第13步:在管理应用程序(即myapp [inner])中将新的url添加到urls.py中

Django | Implement CSS on an app 31
Django | Implement CSS on an app 32

Step 14: Run the Server

步骤14:运行服务器

Django | Implement CSS on an app 33
Django | Implement CSS on an app 34

Step 15: Open Browser and type http://127.0.0.1:8000

步骤15:打开浏览器并输入http://127.0.0.1:8000

Django | Implement CSS on an app 35

翻译自: https://www.includehelp.com/Django/implement-css-on-an-app.aspx

django css

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/540916.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vb mysql 表格显示,在VB中编辑数据库和电子表格

在VB50中有很多功能强大的控件,其中数据控件与一些绑定控件(如文本框,图片框及 ActiveX控件)的相互协作,能够方便地实现对各种数据库记录、表格乃至电子表格的浏览和编辑操作。下面介绍实例,其中数据控件用于记录的浏览、移动、…

[转]Visual Studio 各版本下载

原文地址:[置顶] Visual Studio 各版本下载 文件名称文件大小百度网盘下载微软官方下载Visual Studio 2015 Enterprise - 企业版 - 简体中文3.89GBhttp://pan.baidu.com/s/1bnAY68Bvs2015.ent_chs.isoVisual Studio 2015 Professional - 专业版 - 简体中文3.84GBht…

oracle 列级外键,Oracle外键列上是否需要索引?

外键列上缺少索引会带来两个问题,限制并发性、影响性能。而这两个问题中的任意一个都可能会造成严重性能问题。 无论是Or外键列上缺少索引会带来两个问题,限制并发性、影响性能。而这两个问题中的任意一个都可能会造成严重性能问题。无论是Oracle的官方文…

python 改变词典顺序_按词典顺序排列的功率集

python 改变词典顺序Description: 描述: This is a standard interview problem to find out the power sets in lexicographic order of a given set of numbers using backtracking. 这是一个标准的面试问题,它使用回溯来按给定数字集的字典顺序查找能…

springJdbc in 查询,Spring namedParameterJdbcTemplate in查询

springJdbc in 查询,Spring namedParameterJdbcTemplate in查询, SpringJdbc命名参数in查询,namedParameterJdbcTemplate in查询 >>>>>>>>>>>>>>>>>>>>>>>>>>…

python 添加图例_Python | 在图例标签中添加Sigma

python 添加图例Sigma (𝜎) is very often used greek mathematical letters and has a higher repetition in probability. In this article, we are going to add 𝜎 using a command in matplotlib. Sigma(𝜎)是希腊数学字母中经常使用的字…

java多线程总结(二)

线程一般有6个状态: 新建状态:NEW 可运行状态:RUNNABLE 休眠状态:TIMED_WAITING 等待状态:WAITING 阻塞状态:BLOCKED 终止状态“TERMINATED 当我们使用new创建线程之后,线程处于新建状态,当调用…

韩顺平.2011最新版.玩转oracle视频教程笔记,韩顺平.2011最新版.玩转oracle视频教程(笔记)...

韩顺平.2011最新版.玩转oracle视频教程ORA-01045: user XIAOMING lacks CREATE SESSION privilege; logon denied 警告: 您不再连接到 ORACLE。 SQL> show user; USER 为 ""SQL> conn system/p; 已连接。SQL> grant connect to xiaoming; 授权成功。SQL>…

ansys 内聚力_内聚力 软件工程

ansys 内聚力凝聚 (Cohesion) In general terms, the word cohesion means the action or act of forming a united whole. According to the definition of Cambridge University, cohesion is defined as "the state of sticking together, or being in close agreement…

oracle认证都需要考哪几个方面,Oracle OCP认证要通过哪些考试

Oracle OCP认证要通过哪些考试Oracle OCP DBA认证是所有Oracle认证中最普及的一种认证,这一认证过程是专为那些想要从事Oracle管理的专业数据库管理人员设计的,适用于Oracle9I DBAs的OCP认证通过改进,删除了备份和恢复以及网络考试&#xff0…

Android ImageButton示例代码

1) XML File: activity_main 1)XML文件&#xff1a;activity_main <?xml version"1.0" encoding"utf-8"?><android.support.constraint.ConstraintLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"…

NestedScrolling机制

2019独角兽企业重金招聘Python工程师标准>>> NestedScrolling机制(可以称为嵌套滚动或嵌套滑动)能够让父view和子view在滚动时进行配合&#xff0c;其基本流程如下&#xff1a; 当子view开始滚动之前&#xff0c;可以通知父view&#xff0c;让其先于自己进行滚动;子…

ImageView的scaleType详解

1. 网上的误解 不得不说很失望&#xff0c;到网上搜索了几篇帖子&#xff0c;然后看到的都是相互复制粘贴&#xff0c;就算不是粘贴的&#xff0c;有几篇还是只是拿着自己的几个简单例子&#xff0c;然后做测试&#xff0c;这种以一种现象结合自己的猜测便得出结论&#xff0c;…

IDBI的完整格式是什么?

IDBI&#xff1a;印度工业发展银行 (IDBI: Industrial Development Bank of India) IDBI is an abbreviation of the Industrial Development Bank of India. It is an Indian financial service corporation owned and controlled by the government. In 1964, it was founded…

linux判断内存并释放,linux 内存清理/释放命令

# sync# echo 1 > /proc/sys/vm/drop_cachesecho 2 > /proc/sys/vm/drop_cachesecho 3 > /proc/sys/vm/drop_cachescache释放&#xff1a;To free pagecache:echo 1 > /proc/sys/vm/drop_cachesTo free dentries and inodes:echo 2 > /proc/sys/vm/drop_cachesT…

kei注释_KEI的完整形式是什么?

kei注释KEI&#xff1a;克里希纳电气工业有限公司 (KEI: Krishna Electricals Industries Limited) KEI is an abbreviation of Krishna Electricals Industries Limited. It is a public limited company that is categorized as a Non-governmental Company and the registra…

基于嵌入式linux的数码相框的设计,基于Linux NFS的Web数码相框设计

O 引言随着数码相机和互联网的普及&#xff0c;越来越多的家庭拥有自己的媒体库。媒体库中既包含有自己拍摄的影像文件&#xff0c;也有从网络上下载的影像资料。然而展示影像资料的手段单一&#xff0c;主要通过PC来实现。因此未来构建以媒体库为中心的家庭多媒体网络&#xf…

Spark学习

mapreduce RDD 流程示意 Yarn 转载于:https://www.cnblogs.com/ecollab/p/7248306.html

CSS中的resize属性

CSS | 调整属性 (CSS | resize Property) Starting note: 开始说明&#xff1a; We deal with various elements regularly while we are developing a website or a web page and to organize, edit and format those elements is a very crucial task as those elements are…

物联网网关linux带串口,物联网网关|串口转HTTP GET协议

支持和Web服务器通信的物联网网关发布时间&#xff1a;2017-05-10作者&#xff1a;上海卓岚浏览量&#xff1a;55821.概述随着物联网的发展&#xff0c;越来越多的设备需要连接到云端。其中的设备有各类仪表、工业设备、采集设备、传感器&#xff0c;这些设备都以串口(RS232、R…