Django项目 使用Bootstrap样式来装饰book_list页面
一.book_list页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/fontawesome/css/fontawesome.min.css" rel="stylesheet">
<style>
#imgs1 {
width: 50px;
height: 50px
}
#A1{padding-bottom: 5px}
</style>
</head>
<body>
<!--导航条开始-->
<!-- bootstrap框架 inverse设置为黑色导航条 default设置为白色-->
<nav class="navbar navbar-inverse">
<!-- bootstrap框架 container 左右两边会有一个15px的padding（内边距）container-fluid 没有内边距 不管屏幕大小 都是100% -->
<div class="container-fluid">
<!-- 这是品牌图标的设置开始-->
<div class="navbar-header">
<img id="imgs1"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F21%2F20210721122539_af638.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651157116&t=a7efb24de09f659364a478d7754d9714">
<span>图书管理系统</span>
</div>
<!--品牌图标设置结束-->
<!-- 这是导航栏其他标题设置的开始 -->
<!-- collapse 这是设置在视口大于768px时才显示-->
<!-- navbar-collapse 小于768px时 折叠的div元素会以列表的形式显示-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- navber-nav 设置ul为导航条件组件内的列表元素-->
<ul class="nav navbar-nav">
<li class="active"><a href="#">实时监控<span class="sr-only">(current)</span></a></li>
<li><a href="#">数据分析</a></li>
<li><a href="#">日常管理</a></li>
<li><a href="#">基础设置</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">所属图书馆 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">中华图书馆</a></li>
<li><a href="#">新东方图书馆</a></li>
<li><a href="#">朝阳图书馆</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">延庆图书馆</a></li>
</ul>
<li><a href="#">用户名</a></li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="/book_list/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">图书列表 <span class="caret"></span></a>
</li>
</ul>
</div>
<div class="col-md-11">
<!-- table-striped 条纹状的表格 table-bordered 带边框的表格 table-hover 鼠标悬停效果
table-condensed 表格紧缩-->
<table class="table table-striped table-bordered table-hover table-condensed">
<!-- 这是表单的头部开始-->
<div id="A1">
<button>
<a href="/add_booklist/">新增图书</a>
</button>
</div>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>类型</th>
<th class="text-center">操作</th>
</tr>
</thead>
<!-- 表单头部结束-->
<!-- 表单内容开始-->
<tbody>
{% for bookmsg in book_list %}
<tr>
<td>{{ bookmsg.id }}</td>
<td>{{ bookmsg.name }}</td>
<td>{{ bookmsg.type }}</td>
<td>
<button>
<a href="/del_booklist/?id={{ bookmsg.id }}">删除</a>
</button>
<button>
<a href="/egit_booklist/?id={{ bookmsg.id }}">编辑</a>
</button>
</td>
</tr>
{% endfor %}
</tbody>
<!-- 表单内容结束-->
</table>
<!-- 这是分页功能的开始-->
<nav aria-label="Page navigation">
<ul class="pagination navbar-right">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- 这是分页功能的结束-->
</div>
</div>
</div>
<!--导航条结束-->
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
浙公网安备 33010602011771号