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.pswp.cn/news/540916.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/540916.shtml
英文地址,請注明出處:http://en.pswp.cn/news/540916.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

PHPWeb開發入門體驗學習筆記

PHPWeb開發入門體驗學習筆記4一、PHP web應用開發須知1.入門要點程序員三個階段:碼農(速成技能)->工程師(長期知識)->專家(研究論文)編程三要素:聲明變量(系統、全…

vb mysql 表格顯示,在VB中編輯數據庫和電子表格

在VB50中有很多功能強大的控件,其中數據控件與一些綁定控件(如文本框,圖片框及 ActiveX控件)的相互協作,能夠方便地實現對各種數據庫記錄、表格乃至電子表格的瀏覽和編輯操作。下面介紹實例,其中數據控件用于記錄的瀏覽、移動、…

c# datetime._C#| DateTime.AddTicks()方法與示例

c# datetime.DateTime.AddTicks()方法 (DateTime.AddTicks() Method) DateTime.AddTicks() method is used to return a new date-time object that adds ticks value of this instance. This object does not change the original value of date-time but it returns an objec…

12345組成三個不重復數java,求大神幫忙!五子棋!只能識別按順序識別!例如 12345 不能...

該樓層疑似違規已被系統折疊 隱藏此樓查看此樓import java.util.Arrays;import java.util.Scanner;public class Gobang {public static void main(String[] args) {Scanner sc new Scanner(System.in);boolean finish false;// 有戲是否結束int flagNum 1;// 當前下棋者標記…

[轉]Visual Studio 各版本下載

原文地址:[置頂] Visual Studio 各版本下載 文件名稱文件大小百度網盤下載微軟官方下載Visual Studio 2015 Enterprise - 企業版 - 簡體中文3.89GBhttp://pan.baidu.com/s/1bnAY68Bvs2015.ent_chs.isoVisual Studio 2015 Professional - 專業版 - 簡體中文3.84GBht…

JavaScript中的“ this”關鍵字

JavaScriptthis關鍵字 (JavaScript this keyword) The this keyword is widely used in JavaScript. It has many use cases and is also one of the most intimidating features of JavaScript. In most of the programming languages, this is used to refer to the current …

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. 這是一個標準的面試問題,它使用回溯來按給定數字集的字典順序查找能…

oracle創建用戶名了,oracle創建用戶名

創建用戶//創建用戶名create user username identified by password‘’//賦權限Grant Connect,Resource,DBA to UserName;plsql developer配置下載地址http://ah1.down.chinaz.com/201011/plsql8.04cn.zip右擊"我的電腦" - "屬性" - "高級" - &…

webpack學習筆記1

webpack學習筆記1:基本概念 前言: 現在在日常的開發中,webpack已經是必不可少的東西了,現在的需求基本都是用webpack對資源進行打包整合,所以打算寫一點關于webpack的東西,這是第一篇,主要是介紹…

ruby 嵌套函數_Ruby嵌套有示例的循環

ruby 嵌套函數嵌套循環 (Nested for loop) Nesting of for loop means one for loop is available inside another for loop. It means that there are two loops, then the first one is an outer loop and the second one is the inner loop. Execution will take place in t…

oracle10數據庫鏈接失敗,Oracle10g出現Enterprise Manager 無法連接到數據庫實例解決辦法...

剛裝好 10g 時,把的監聽端口是1521.后來把端口改成了1568了,登上em發現Enterprise Manager 無法連接到數據庫實例 ,連接字符串的端口仍是1521,如何解決這個問題。登陸:出現下面錯誤:Enterprise …

springJdbc in 查詢,Spring namedParameterJdbcTemplate in查詢

springJdbc in 查詢,Spring namedParameterJdbcTemplate in查詢, SpringJdbc命名參數in查詢,namedParameterJdbcTemplate in查詢 >>>>>>>>>>>>>>>>>>>>>>>>>>…

oracle 11g r2版本號,Oracle 11g r2新增版本功能(二)

在11.2中,Oracle數據庫引入的版本的概念,這為應用程序的升級提供了極大的方便。這篇簡單描述版本的實現和查詢方式。前一篇簡單描述了版本,下面接著上面的例子看看Oracle是如何實現這個功能的:SQL> select synonym_name, table…

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(𝜎)是希臘數學字母中經常使用的字…

【51CTO學院】搜索V2.0——新的搜索,只為給你更好的

為了讓你能快速、準確的找到自己心儀的內容,51CTO學院產品及研發用盡了洪荒之力研發近2個月終于將搜索進行了全面升級。 搜索看似簡單,實則要做到精準和智能卻不是件易事,為了讓學員快速找到自己所需,節省找課時間,更高…

oracle擴容日志文件,ORACLE 加大日志文件

--新建臨時日志文件alter database add logfile group 4 (‘/u01/app/oracle/oradata/orcl/redo04.log‘) size 10m;alter database add logfile group 5 (‘/u01/app/oracle/oradata/orcl/redo05.log‘) size 10m;alter database add logfile group 6 (‘/u01/app/oracle/orad…

java多線程總結(二)

線程一般有6個狀態: 新建狀態:NEW 可運行狀態:RUNNABLE 休眠狀態:TIMED_WAITING 等待狀態:WAITING 阻塞狀態:BLOCKED 終止狀態“TERMINATED 當我們使用new創建線程之后,線程處于新建狀態,當調用…

scandir函數_PHP scandir()函數與示例

scandir函數PHP scandir()函數 (PHP scandir() function) The full form of scandir is "Scan Directory", the function scandir() is used to get the list of the files and directories available in the specified directory. scandir的完整格式為“ Scan Direc…

韓順平.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>…