Django中使用Bootstrap

一、在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 %}

以上，分页显示样式为:

Django中使用Bootstrap的更多相关文章

Django中使用ModelForm实现Admin功能
接上一篇<Django中使用Bootstrap> ModelForm 可以将数据库中的信息展示在一个表中,因此我们在查询数据库信息时可以使用ModelForm在前端展示查询到的信息. 在上 ...
django中引入bootstrap4.3
1.下载bootstrap4.3的包:https://getbootstrap.com/ 2.将下载后的文件放在project下新创建的static目录下.例如我的project是mysite,则放在 ...
测试开发之Django——No4.Django中前端框架的配置与添加
我们在开发一个web项目的时候,虽然我们不是专业开发,但是我们也想要做出来一个美美的前端页面. 这种时候,百度上铺天盖地的前端框架就是我们的最好选择了. 当然,在网上直接下载的框架,我们是不能直接用的 ...
Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap
本文学习如何通过Django使用Bootstrap.其实在之前好几个Django项目中已经尝试使用过了Bootstrap,而且都留有学习记录,我已经大概有了一个大的框架,那么本文就从头再走一遍流程,其 ...
Django中使用Bootstrap----带view.py视图函数（也就是项目下的脚本文件）
一.Django中使用Bootstrap 1.首先建立工程,建立工程请参照:https://www.cnblogs.com/effortsing/p/10394511.html 2.在Firstdja ...
Django 中bootstrap的引用
bootstrap的优越性如果你有基本的HTML+CSS,bootstrap其实就是在标签中加入具体的class来实现样式.和原生态的HTML+CSS需要先在head标签的style写样式或者引入外 ...
Django之视图与模板以及在模板中使用bootstrap
从url中也可以传递参数给后台进行处理.比如http://127.0.0.1:8001/add/?a=4&b=5. 这个链接传入a=4,b=5.后台将进行a+b的处理新增处理函数 def a ...
（day69）axios、配置ElementUI、配置jQuery和Bootstrap、Django中的CORS问题
目录一.Vue的ajax插件:axios 二.Django中的CORS跨域问题 (一)同源策略 (二)解决方式(cors模块) 三.Vue配置ElementUI 四.Vue配置jQuery和Boot ...
django中的静态文件管理
一个站点通常需要保存额外的文件,比如图片 css样式文件 js脚本文件 ,在django中,倾向于将这些文件称为静态文件.django提供了django.contrib.staticfile ...

随机推荐

Cg（C for Graphic）标准函数库之数学函数与几何函数
和 C 的标准函数库类似, Cg 提供了一系列内建的标准函数.这些函数用于执行数学上的通用计算或通用算法(纹理映射等),例如,需要求取入射光线的反射光线方向向量可以使用标准函数库中的 reflect ...
Thread.Sleep(0) vs Sleep(1) vs Thread.Yeild()
注:本文为个人学习摘录,原文地址:http://www.cnblogs.com/stg609/p/3857242.html 本文将要提到的线程及其相关内容,均是指 Windows 操作系统中的线程,不 ...
PHP定义静态方法的原则
与实例逻辑无关与类逻辑有关静态类本质上跟纯函数没区别. 1.static方法是类中的一个成员方法,属于整个类,即使不用创建任何对象也可以直接调用! 2.静态方法效率上要比实例化高,静态方法的缺点是 ...
Leetcode easy
1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...
django manage.py 的各种功能
[简介] django-admin.py是Django的一个用于管理任务的命令行工具.本文将描述它的大概用法. 另外,在每一个Django project中都会有一个manage.py.manage. ...
HTML中<title>与<h1>区别
1)<title>标签表示的标题是整个网页的名字,即在浏览器顶部的tab栏里显示的.搜索引擎通过它来搜索网页:<title>标签里的文本不出现在页面内容里面. <h1&g ...
vue对比其他框架
对比其他框架 React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保 ...
java 缓存ehcache的使用(使用方式一)
实体要序列化 resource文件夹下建立 ehcache.xml <?xml version="1.0" encoding="UTF-8"?> & ...
hdu 2149 Public Sale 简单博弈
Problem Description 虽然不想,但是现实总归是现实,Lele始终没有逃过退学的命运,因为他没有拿到奖学金.现在等待他的,就是像FarmJohn一样的农田生涯.要种田得有田才行,Lel ...
pymongo数据报表脚本
最近打算将平时自己的一些小工具整理整理,由于一直使用python写脚本,而且数据库一直使用MongoDB,所以直接使用pymonogo驱动数据库做一些报表生成的小脚本,此次的脚本主要针对每个月中公司业 ...

Django中使用Bootstrap

Django中使用Bootstrap的更多相关文章

随机推荐

热门专题