Django中使用Bootstrap

本文轉載自查看原文 2016-08-05 16:18 22111 Django

一、在Django中引用Bootstrap模版

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

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

3、將下載的模版放在templates中，修改名字為base.html。並在templates里創建與app同名的目錄(stc_crm)用來存放該app使用的模版。

4、在stu_crm中創建dashboard.html，用來繼承base.html模版。

{% extends 'base.html' %}

目錄結構為:

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

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

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

6、設置url

在全局url中設置轉發規則

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.py

from django.conf.urls import url,include

from stu_crm import views
import stu_crm

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

7、定義視圖函數 views.py

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

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

8、修改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>

然后頁面就可以正常訪問了。

二、修改模版樣式

1、刪除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>

2、新建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 %}

3、創建新的url規則

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

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

4、數圖函數

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

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

.signed{
    background-color:greenyellow;
}

.unregistered{
    background-color:silver;
}

.graduated{
    background-color:orange;
}

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

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

經過以上幾步，前段顯示效果為:

三、分頁顯示

1、修改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})

2、修改前端顯示頁面

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 %}

效果額如下圖:

3、使用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 %}

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

4、分頁中只顯示一定數量的頁碼。

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

由於前端頁面中不能進行相關算數運算，因此將該部分功能寫在后端py文件中(模版)，然后向前端傳回html

在django中自定義模版

1、在app應用下創建templatetags目錄，並在該目錄中創建模版文件和__init__.py文件，模版文件為customer_tags.py，(必須手動創建__init__.py文件，否則注冊模版不生效，django_version:1.9.8)目錄結構圖：

2、在模版文件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 ''

3、前端頁面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 %}

以上，分頁顯示樣式為:

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Django之視圖與模板以及在模板中使用bootstrap django 結合 bootstrap 使用 vue中使用bootstrap 在React中使用Bootstrap Django中使用websocket Django中使用celery Django中使用緩存 django中使用redis 在Django中使用zerorpc django中使用RabbitMQ