Django2學習筆記--引用本地靜態檔案css,js等
在django引用bootstrap前端框架
個人學習筆記,內容不作為各位學習參考
第一步 下載
官網下載bootstrap:https://v3.bootcss.com/getting-started/
也可以線上上複製保留到本地
css:https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css
jQuery:https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js
js:https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js
第二步 保留檔案
在應用下新建stitic資料夾,保留bootstrap.min.css、fonts、bootstrap.min.js、jquery.min.js(其他的大概率不會用),可以分別新建css、js資料夾分類儲存
第三步 配置settings.py
在末尾新增
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static'),
]
第四步 html路徑配置
<!-- 呼叫bootstrap必加load,注意js jquery必須在bootstrap前-->
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script type="text/javascript" src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
相關文章
- Nginx下快取靜態檔案(如css js)Nginx快取CSSJS
- vue中 靜態檔案引用注意事項Vue
- nginx 代理圖片、css、js等靜態資源NginxCSSJS
- Object C學習筆記10-靜態方法和靜態屬性Object筆記
- 偽靜態和重定向(apache)學習筆記Apache筆記
- PHP學習筆記——延遲靜態繫結PHP筆記
- php頁面靜態化技術;學習筆記PHP筆記
- CSS 學習筆記CSS筆記
- Java學習筆記之檔案Java筆記
- 引用js、css檔案時加時間戳JSCSS時間戳
- js動態載入 js檔案和 css檔案JSCSS
- C++ 學習筆記之 引用C++筆記
- 本地模擬伺服器CDN(靜態HTML,CSS,JS)開發伺服器HTMLCSSJS
- Java開發筆記(六十四)靜態方法引用和例項方法引用Java筆記
- Tomcat學習筆記—-本地部署servlet動態資源Tomcat筆記Servlet
- 《從零開始學Swift》學習筆記(Day 36)——靜態方法Swift筆記
- css學習筆記(一)CSS筆記
- DVWA-檔案包含學習筆記筆記
- 【C#學習筆記】讀檔案C#筆記
- 【C#學習筆記】寫檔案C#筆記
- js學習筆記JS筆記
- SpringMVC學習筆記9-靜態資源對映SpringMVC筆記
- fastapi 使用本地靜態檔案替換 swagger cdnASTAPISwagger
- Angular 專案裡 angular.json 檔案內容的學習筆記AngularJSON筆記
- HTML&CSS學習筆記HTMLCSS筆記
- CSS 基礎學習筆記CSS筆記
- Animation.css學習筆記CSS筆記
- div+css學習筆記CSS筆記
- Sanic 靜態檔案
- 忽略某些檔案 —— Git 學習筆記 05Git筆記
- OS學習筆記六:檔案系統筆記
- 【C#學習筆記】儲存檔案C#筆記
- 【C#學習筆記】播放wav檔案C#筆記
- redo日誌檔案學習筆記(一)筆記
- NodeJS學習筆記NodeJS筆記
- angularjs學習筆記AngularJS筆記
- 【Git】學習筆記–clone和本地修改Git筆記
- Vue學習筆記之Webpack搭建本地伺服器及配置檔案的分離Vue筆記Web伺服器