Django模版

django-bootstaps3

什么是bootstaps

是前端架构，是一款css/html框架，是将 BootStrap3（3 表示版本号）集成到 Django 中，作为 Django 的一个应用提供。
这样做的好处是在 Django 中用 bootstrap 会更加方便
安装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>

django-bootstaps3

发布会列表

相关推荐