Django中引入bootstrap的詳細圖文詳解
一、下載bootstrap
下載地址:https://v3.bootcss.com/getting-started/#download,選擇第二個,下載帶有源碼的bootstrap,隻能通過這種方式(django是封閉的)
下載的目錄結構:
dist文件是bootstrap的核心文件
二、創建一個簡單Demo項目
1.在根項目下創建一個static目錄,再在static下創建一個bootstrap文件夾。
2.並在根項目下創建一個templates目錄用於存放html文件。
3.找到setting.py修改STATIC_URL:(輸入到該文件的末尾即可,註意符號)
STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join('static'), ) STATIC_ROOT = ''
4.setting.py修改TEMPLATES下的'DIRS'
註意:BASE_DIR是manage.py文件的所在路徑
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, "templates")], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]
5.找到應用下的view.py文件,修改如下:
#視圖函數,返回index.html頁面 from django.http import HttpResponse from django.shortcuts import render def index(request): return render(request, 'index.html')
6.在跟路由urls.py文件修改如下:
from django.urls import path from App import views urlpatterns = [ # 首頁 path('user/', views.index, name="index"), ]
上面已經寫好視圖函數並且加好路由瞭,接下來開始放置bootstrap。
三、配置bootstrap
1.打開步驟一下載的文件,找到dist文件夾,將裡面的的3個文件夾css、fonts、js復制
到/static/bootstrap下。
2.從步驟一下載的bootstrap的壓縮文件找到docs/examples/blog/下的index.html,復制到項目路徑步驟二新建的/templates/目錄下,然後改名為base.html。
3.將<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
改為<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
4.將<link href="blog.css" rel="stylesheet">
改為<link href="/static/bootstrap/css/blog.css" rel="stylesheet">
5.將<script src="../../dist/js/bootstrap.min.js"></script>
改為 <script src="/static/bootstrap/js/bootstrap.js"></script>
6.將步驟一下載的/docs/examples/blog/下的blog.css復制到static/bootstrap/css/目錄下
7.新建一個index.html,裡面隻需要寫對base.html頁面的繼承
{% extends 'base.html' %}
8.運行Django,瀏覽器打開http://127.0.0.1:8000/user/
總結
到此這篇關於Django中引入bootstrap的文章就介紹到這瞭,更多相關Django引入bootstrap內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- python框架django中結合vue進行前後端分離
- Django數據庫(SQlite)基本入門使用教程
- Django城市信息查詢功能的實現步驟
- Django URL和View的關系說明
- Python3+Django get/post請求實現教程詳解