Django中使用Bootstrap

時間 2019-11-19

原文原文鏈接

1、在Django中引用Bootstrap模版css

一、首先下載bootsrtap代碼(http://v3.bootcss.com/getting-started/#download)，並將下載後的文件放在project下新建立的static目錄下。下載dashboard.css放在static/bootstrap/css/目錄下。下載jquery放在static/bootstrap/js/目錄下。html

二、下載合適的bootstrap模版樣式(http://v3.bootcss.com/getting-started/)，下載的文件包含一個html和一個目錄。前端

三、將下載的模版放在templates中，修更名字爲base.html。並在templates裏建立與app同名的目錄(stc_crm)用來存放該app使用的模版。jquery

四、在stu_crm中建立dashboard.html，用來繼承base.html模版。數據庫

{% extends 'base.html' %}

目錄結構爲:django

五、修改全局setting文件，添加靜態文件路徑。bootstrap

STATIC_URL = '/static/'                 #若存放靜態文件的static目錄在app目錄下，則改局生效，無需定義下面的

STATICFILES_DIRS = [　　　　　　　　　　　　＃若存放靜態文件的static目錄在project目錄下，則用該定義
    os.path.join(BASE_DIR, "static"),
]

六、設置url後端

在全局url中設置轉發規則bash

from django.conf.urls import url,include

from stu_crm import views
import stu_crm

urlpatterns = [
    url(r'^stu_crm/',include('stu_crm.urls')),
]

在stu_crm中建立urls.pyapp

from django.conf.urls import url,include

from stu_crm import views
import stu_crm

urlpatterns = [
    url(r'^$',views.dashboard),
]

七、定義視圖函數 views.py

def dashboard(request):
    return render(request,'stu_crm/dashboard.html')

注意，返回html的路徑爲'stu_crm/dashboard.html'

八、修改bash.html中引用js的路徑

因爲下載的bootstrap樣式中引用了一些線上的js文件，這裏須要修改成本地的文件。

    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/bootstrap/css/dashboard.css" rel="stylesheet">

...

    <script src="/static/bootstrap/js/jquery-2.2.3.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="/static/bootstrap/js/holder.min.js"></script>

而後頁面就能夠正常訪問了。

2、修改模版樣式

一、刪除base.html 中關於頁面標題及內容樣式的定義，並容許子模版繼承後重寫該部分。({ % black page-header% }、{ % black page-content% })

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">{% block page-header %}your page header{% endblock %}</h1>
            {% block page-content %}
                your page content
            {% endblock %}
        </div>

二、新建customers.html頁面，用來展現客戶信息列表。該頁面繼承父模版base.html，並自定義標題和主題內容。

{% extends 'base.html' %}

{% block page-header %}
客戶信息表
{% endblock %}

{% block page-content %}
    <table class="table table-striped">     #使用bootsrtap定義好的樣式，將客戶信息展現在一個表裏
        <thead>　　　　　　　　　　　　　　　　　＃表頭
            <tr>　　　　
                <th>ID</th>　　　　　　　　　　＃每列標題
                <th>QQ</th>
                <th>姓名</th>
                <th>渠道</th>
                <th>諮詢課程</th>
                <th>班級類型</th>
                <th>客戶備註</th>
                <th>狀態</th>
                <th>課程顧問</th>
                <th>日期</th>
            </tr>
        </thead>
        <tbody>　　　　　　　　　　　　　　　　　　　　　　　　　＃表的主題內容
            {% for customer in customers_list %}
                <tr>
                    <td>{{ customer.id }}</td>　　　　　　＃每列展現的美美容
                    <td>{{ customer.qq }}</td>
                    <td>{{ customer.name }}</td>
                    <td>{{ customer.source }}</td>
                    <td>{{ customer.course }}</td>
                    <td>{{ customer.get_class_type_display }}</td>    ＃get_class_type_display 顯示中文
                    <td>{{ customer.customer_note|truncatechars:30}}</td>　　　＃｜truncatechars:30 默認在頁面只顯示30個字節
                    <td class="{{ customer.status }}">{{ customer.get_status_display }}</td>  ＃根據不一樣的狀態，添加底色樣式，css樣式在customers.css中定義
                    <td>{{ customer.consultant}}</td>
                    <td>{{ customer.date }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

三、建立新的url規則

urlpatterns = [
    url(r'^customer/$',views.customer),
]

將對localhost:8000/stu_crm/customer的請求轉給customer函數處理

四、數圖函數

def customer(request):
    customers=models.Customer.objects.all()
    return render(request,'stu_crm/customers.html',{'customers_list':customers})

五、在static/bootstrap/css目錄下建立用於顯示不一樣狀態底色的樣式文件customers.css，每一個類標籤的名字即數據庫中客戶狀態的字段

.signed{
    background-color:greenyellow;
}

.unregistered{
    background-color:silver;
}

.graduated{
    background-color:orange;
}

六、在base.html中添加對customers.css樣式的引用

<link href="/static/bootstrap/css/dashboard.css" rel="stylesheet">
<link href="/static/bootstrap/css/customer.css" rel="stylesheet">

通過以上幾步，前段顯示效果爲:

3、分頁顯示

一、修改views中customer函數

from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger


def customer(request):
    customers=models.Customer.objects.all()
    paginator=Paginator(customers,2)    #每頁顯示2條
    page=request.GET.get('page')        #前段請求的頁,好比點擊'下一頁',該頁以變量'page'表示
    try:
      customer_obj=paginator.page(page) #獲取前端請求的頁數
    except PageNotAnInteger:
        customer_obj=paginator.page(1)   #若是前端輸入的不是數字,就返回第一頁
    except EmptyPage:
        customer_obj=paginator.page(paginator.num_pages)   #若是前端請求的頁碼超出範圍,則顯示最後一頁.獲取總頁數,返回最後一頁.好比共10頁,則返回第10頁.
    return render(request,'stu_crm/customers.html',{'customers_list':customer_obj})

二、修改前端顯示頁面

customers.html添加分頁功能後以下

{% extends 'base.html' %}

{% block page-header %}
客戶信息表
{% endblock %}

{% block page-content %}
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>QQ</th>
                <th>姓名</th>
                <th>渠道</th>
                <th>諮詢課程</th>
                <th>班級類型</th>
                <th>客戶備註</th>
                <th>狀態</th>
                <th>日期</th>
                <th>課程顧問</th>
                <th>日期</th>
            </tr>
        </thead>
        <tbody>
            {% for customer in customers_list %}
                <tr>
                    <td>{{ customer.id }}</td>
                    <td>{{ customer.qq }}</td>
                    <td>{{ customer.name }}</td>
                    <td>{{ customer.source }}</td>
                    <td>{{ customer.course }}</td>
                    <td>{{ customer.get_class_type_display }}</td>
                    <td>{{ customer.customer_note|truncatechars:30}}</td>
                    <td class="{{ customer.status }}">{{ customer.get_status_display }}</td>
                    <td>{{ customer.consultant}}</td>
                    <td>{{ customer.date }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="pagination">
        <span class="step-links">
            {% if customers_list.has_previous %}                                     <!--若是有上一頁-->
                <a href="?page={{ customers_list.previous_page_number }}">上一頁</a>  <!--點擊時超連接到上一頁-->
            {% endif %}

            <span class="current">
                 Page{{ customers_list.number }} of {{ customers_list.paginator.num_pages }}  <!--customers_list.number爲當前頁碼,customers_list.paginator.num_pages爲總頁碼數-->
            </span>

            {% if customers_list.has_next %}    <!--若是有下一頁-->
                <a href="?page={{ customers_list.next_page_number }}">下一頁</a>    <!--點擊時超連接到下一頁-->
            {% endif %}
        </span>
    </div>
{% endblock %}

效果額以下圖:

三、使用bootstrap的分頁樣式

在bootstrap上找到相應源代碼，粘貼至customers.html文件中並做相應修改

{% extends 'base.html' %}

{% block page-header %}
客戶信息表
{% endblock %}

{% block page-content %}
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>QQ</th>
                <th>姓名</th>
                <th>渠道</th>
                <th>諮詢課程</th>
                <th>班級類型</th>
                <th>客戶備註</th>
                <th>狀態</th>
                <th>課程顧問</th>
                <th>日期</th>
            </tr>
        </thead>
        <tbody>
            {% for customer in customers_list %}
                <tr>
                    <td>{{ customer.id }}</td>
                    <td>{{ customer.qq }}</td>
                    <td>{{ customer.name }}</td>
                    <td>{{ customer.source }}</td>
                    <td>{{ customer.course }}</td>
                    <td>{{ customer.get_class_type_display }}</td>
                    <td>{{ customer.customer_note|truncatechars:30}}</td>
                    <td class="{{ customer.status }}">{{ customer.get_status_display }}</td>
                    <td>{{ customer.consultant}}</td>
                    <td>{{ customer.date }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="pagination">
        <nav>
            <ul class="pagination">

                {#左箭頭部分#}
                {% if customers_list.has_previous %}      <!--若是有上一頁,就顯示左箭頭,若是沒有上一頁(即當前爲第一頁),就不會顯示-->
                    <li class="enabled"><a href="?page={{ customers_list.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                {% endif %}

                {# 中間頁碼顯示部分 #}
                {% for page_num in customers_list.paginator.page_range %}         <!--遍歷全部分頁-->
                    {% if page_num == customers_list.number %}                    <!--若是當前頁是顯示頁,頁碼數字加底色-->
                        <li class="active"><a href="#">{{ page_num }}<span class="sr-only">(current)</span></a></li>
                    {% else %}
                        <li class=""><a href="?page={{ page_num }}">{{ page_num }}<span class="sr-only">(current)</span></a></li>
                    {% endif %}
                {% endfor %}

                {# 右箭頭部分 #}
                {% if customers_list.has_next %}          <!--若是有下一頁,就顯示右箭頭,若是沒有下一頁(即當前爲最後一頁),就不會顯示-->
                    <li class="enabled"><a href="?page={{ customers_list.next_page_number }}" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
                {% endif %}

            </ul>
        </nav>
    </div>
{% endblock %}

便可顯示以上效果的分頁。

四、分頁中只顯示必定數量的頁碼。

在分頁中只顯示於當前頁最近的三頁(前三頁和後三頁)

因爲前端頁面中不能進行相關算數運算，所以將該部分功能寫在後端py文件中(模版)，而後向前端傳回html

在django中自定義模版

一、在app應用下建立templatetags目錄，並在該目錄中建立模版文件和__init__.py文件，模版文件爲customer_tags.py，(必須手動建立__init__.py文件，不然註冊模版不生效，django_version:1.9.8)目錄結構圖：

二、在模版文件customer_tag.py中註冊模版到django並定義分頁標籤樣式

#!_*_ coding:utf-8 _*_
from django import template
from django.utils.html import format_html


register = template.Library()      # 將自定義的模版註冊到django

@register.simple_tag
def guess_page(current_page,loop_num):
    offset = abs(current_page - loop_num)
    if offset < 3:                  #若是當前循環頁數和當前顯示的頁數的絕對值小於3,就顯示該頁碼
        if current_page == loop_num:
            #若是循環頁爲當前顯示頁,則加底色
            #第一個loop_num爲調轉的頁碼,第二個loop_num爲分頁標籤中顯示的,
            page_ele = '''<li class="active"><a href="?page= %s">%s<span class="sr-only">(current)</span></a></li>''' % (loop_num,loop_num)
        else:
            page_ele = '''<li class=""><a href="?page= %s">%s<span class="sr-only">(current)</span></a></li>''' % (loop_num,loop_num)

        return format_html(page_ele)   #以html返回前端
    else:
        return ''

三、前端頁面customers.html

{% extends 'base.html' %}
{% load customer_tags %}

{% block page-header %}
客戶信息表
{% endblock %}

{% block page-content %}
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>QQ</th>
                <th>姓名</th>
                <th>渠道</th>
                <th>諮詢課程</th>
                <th>班級類型</th>
                <th>客戶備註</th>
                <th>狀態</th>
                <th>課程顧問</th>
                <th>日期</th>
            </tr>
        </thead>
        <tbody>
            {% for customer in customers_list %}
                <tr>
                    <td>{{ customer.id }}</td>
                    <td>{{ customer.qq }}</td>
                    <td>{{ customer.name }}</td>
                    <td>{{ customer.source }}</td>
                    <td>{{ customer.course }}</td>
                    <td>{{ customer.get_class_type_display }}</td>
                    <td>{{ customer.customer_note|truncatechars:30}}</td>
                    <td class="{{ customer.status }}">{{ customer.get_status_display }}</td>
                    <td>{{ customer.consultant}}</td>
                    <td>{{ customer.date }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="pagination">
        <nav>
            <ul class="pagination">

                {#左箭頭部分#}
                {% if customers_list.has_previous %}      <!--若是有上一頁,就顯示左箭頭,若是沒有上一頁(即當前爲第一頁),就不會顯示-->
                    <li class="enabled"><a href="?page={{ customers_list.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                {% endif %}

                {# 中間頁碼顯示部分 #}
                {% for page_num in customers_list.paginator.page_range %}
                    {% guess_page customers_list.number page_num%}     <!--將customers_list.number和page_num兩個參數傳遞給guess_page函數-->
                {% endfor %}

                {#右箭頭部分 #}
                {% if customers_list.has_next %}          <!--若是有下一頁,就顯示右箭頭,若是沒有下一頁(即當前爲最後一頁),就不會顯示-->
                    <li class="enabled"><a href="?page={{ customers_list.next_page_number }}" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
                {% endif %}

            </ul>
        </nav>
    </div>
{% endblock %}