django-bootstaps3
-
什么是bootstaps
这样做的好处是在 Django 中用 bootstrap 会更加方便
是前端架构,是一款css/html框架,是将 BootStrap3(3 表示版本号)集成到 Django 中,作为 Django 的一个应用提供。
- 安装Django-bootstrap3
python3 -m pip install django-bootstrap3 - 添加应用
在/guest/settings.py
发布会列表
- 写一个展示发布会列表的页面
- H5的知识
1.div是分割页面的块级元素,在div块内可以单独设置属性(颜色排列等,不影响块外的)
- 在views中创建获取发布会的函数
from sign.models import Event,Guest def event_manage(request):
username=request.session.get('user','')#读取浏览器cookie
event_list=Event.object.all()
return render(request,"event_manage.html",{'user':username,'events':event_list})
- 在urls中添加
path('event_manage/',views.event_manage)
- 在templates,修改event_manage.html
<html lang="zh-CN">
<head>
{%load bootstrap3%}
{%bootstrap_css%}
{%bootstrap_javascript%}
<title>Guest Manage</title>
</head>
<boby role="document">
<!-- 导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header">
<a class="navbar-brand" href="/event_manage/">Guest Manage System</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">发布会</a></li> <li><a href="/guest_manage/">嘉宾</a></li>
</ul>
<ul class="nav navbar-nav navbar-right"> <li><a href="#">{{user}}</a></li> <li><a href="/logout/">退出</a></li>
</ul>
</div>
</nav>
<!-- 发布会列表 -->
<div class="row" style="padding-top: 80px;">
<div class="col-md-6">
<table class="table table-striped">
<thead> <tr> <th>id</th><th>名称</th><th>状态</th><th>地址</th><th>时间</th>
</tr>
</thead>
<tbody> {% for event in events %} <tr> <td>{{ event.id }}</td> <td>{{ event.name }}</td> <td>{{ event.status }}</td> <td>{{ event.address }}</td> <td>{{ event.start_time }}</td> </tr>
{% endfor %} </tbody> </table> </div> </div> </body> </html>
对于 BootStrap 框架来说,它主要通过 class 属性来设置 HTML 标签的样式。
{% load bootstrap3 %} {% bootstrap_css %} {% bootstrap_javascript %} 加载 Bootstrap3 应用,CSS 和 JavaScript 文件。{% %}为 Django 的模板标签,Django 的模板语言将会 在该标签下编写。
<title>Guest Manage</title> 设置页面标题为 Guest Manage。
<li class="active"><a href="#">发布会</a></li> <li><a href="/guest_manage/">嘉宾</a></li>