当前位置：首页 >前端技术 > Django中使用Bootstrap

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,includefrom stu_crm import viewsimport stu_crmurlpattes = [url(r'^stu_crm/',include('stu_crm.urls')),]

在stu_crm中创建urls.py

from django.conf.urls import url,includefrom stu_crm import viewsimport stu_crmurlpattes = [url(r'^$',views.dashboard),]

7、定义视图函数 views.py

def dashboard(request):retu 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规则

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

将对localhost:8000/stu_crm/customer的请求转给customer函数处理

4、数图函数

def customer(request):customers=models.Customer.objects.all()retu 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,PageNotAnIntegerdef 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页.retu 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 templatefrom django.utils.html import format_htmlregister = template.Library()  # 将自定义的模版注册到django@register.simple_tagdef 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)retu format_html(page_ele)#以html返回前端else:retu ''

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