一、下載bootstrap

下載地址:https://v3.bootcss.com/getting-started/#download,選擇第二個(gè),下載帶有源碼的bootstrap,只能通過(guò)這種方式(django是封閉的)

下載的目錄結(jié)構(gòu):

dist文件是bootstrap的核心文件 

二、創(chuàng)建一個(gè)簡(jiǎn)單Demo項(xiàng)目

1.在根項(xiàng)目下創(chuàng)建一個(gè)static目錄,再在static下創(chuàng)建一個(gè)bootstrap文件夾。

2.并在根項(xiàng)目下創(chuàng)建一個(gè)templates目錄用于存放html文件。

3.找到setting.py修改STATIC_URL：(輸入到該文件的末尾即可,注意符號(hào))

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.找到應(yīng)用下的view.py文件，修改如下：

#視圖函數(shù),返回index.html頁(yè)面 
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 = [
    # 首頁(yè)
    path('user/', views.index, name="index"),
]

上面已經(jīng)寫(xiě)好視圖函數(shù)并且加好路由了，接下來(lái)開(kāi)始放置bootstrap。

三、配置bootstrap

1.打開(kāi)步驟一下載的文件，找到dist文件夾，將里面的的3個(gè)文件夾css、fonts、js復(fù)制
    到/static/bootstrap下。

 2.從步驟一下載的bootstrap的壓縮文件找到docs/examples/blog/下的index.html，復(fù)制到項(xiàng)目路徑步驟二新建的/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復(fù)制到static/bootstrap/css/目錄下

7.新建一個(gè)index.html，里面只需要寫(xiě)對(duì)base.html頁(yè)面的繼承

{% extends 'base.html' %}

 8.運(yùn)行Django，瀏覽器打開(kāi)http://127.0.0.1:8000/user/

總結(jié)

到此這篇關(guān)于Django中引入bootstrap的文章就介紹到這了,更多相關(guān)Django引入bootstrap內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論