Django研发网站-5-运用bootstrap模板美化前端页面-天涯论坛

6hz7vif 发表于 2024-10-10 05:20:55

Django研发网站-5-运用bootstrap模板美化前端页面

<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/30a8322702524dfeb8c3cd103339e471~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744684&x-signature=mEKbcQ7%2FNAuy9t55quY1Q%2FoU83E%3D" style="width: 50%; margin-bottom: 20px;"></div>
首要咱们打开bootstrap的网站，查看bootstarp的中文文档
简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网 (bootcss.com)
中文文档中有对bootstrap的仔细介绍。能够在里面逐个学习。
咱们今天用bootstrap美化页面，表示上篇文案中的内容，并实现查找功能。
在快速入门中，咱们找到入门模板，将里面的代码复制。
而后再users的templates中新建一个show2.html文件，将入门模板粘贴到show2.html中。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p9-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/f95cfb6c8a274329985507b7b92f2b00~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744684&x-signature=hL1I%2FpO7owVFCUYSzlghFkz128U%3D" style="width: 50%; margin-bottom: 20px;"></div>
在views.py中增多一个函数show_excel2.html,
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/eb7c3be9149c47a28a78cf4377e4b21f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744684&x-signature=AqIItQ44NlRxiuq3warZmMjHYjk%3D" style="width: 50%; margin-bottom: 20px;"></div>
在url.py中增多路由，
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/c6981558e7bc4e11b246f294c7f8b73a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744684&x-signature=nHaTUmEKZe6ikBSXfNnM%2BLKT2Ks%3D" style="width: 50%; margin-bottom: 20px;"></div>
运行程序，在浏览器中输入http://127.0.0.1:8000/show_excel2，页面正常表示，说明路由、页面均是正常。下面在show2.html中运用bootstrap的表格样式。

打开bootstrap中文文档，左侧选取页面内容——表格，在example中选取第二个例子，复制粘贴到show_excel2.html中。在对样例进行修改，代码如下：<div class="container">
 <div class="row">
 <table class="table table-dark">
 <thead>
 <tr>
 <th scope="col">学号</th>
 <th scope="col">姓名</th>
 <th scope="col">语文</th>
 <th scope="col">数学</th>
 <th scope="col">英语</th>
 </tr>
 </thead>
 <tbody>{% for idx, row in dg.iterrows %}
 <tr>
 <td>{{ row.学号 }}</td>
 <td>{{ row.姓名 }}</td>
 <td>{{ row.语文 }}</td>
 <td>{{ row.数学 }}</td>
 <td>{{ row.英语 }}</td>
 </tr>
 {% endfor %}
 </tbody>
 </table>
 </div>
 </div>
刷新浏览器页面，发掘页面的数据表示出来，表格出现了变化。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/a6dccf36f6354c889a663d7ad40a156a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744684&x-signature=vMw1mh3iSG1Le7yuiO3QJtw6IbM%3D" style="width: 50%; margin-bottom: 20px;"></div>
下面增多一个查找功能。
在show_excel2.html页面中的<div class="container"></div>内的表格上方增多一个<div class="row"></div>。
打开bootstrap中文文档，左侧选取组件——表单，复制粘贴到页面中。修改样式。代码如下：<div class="container">
<div class="row">
<form class="form-inline" method="post">
{% csrf_token %} 
<div class="form-group mb-2">
<label for="staticEmail2" >成绩查找</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" name="keyword" id="search1" placeholder="请输入搜索关键词">
</div>
<button type="submit" class="btn btn-primary mb-2">查找</button>
</form>
</div>
在修改views.py代码，实现查找功能。def show_excel2(request):
df=pd.read_excel(BASE_DIR/data/1.xlsx) #读取excel文件中的数据
keyword=""
if request.method=="POST":
keyword=request.POST["keyword"]
keyword=str(keyword).strip() #去除多余空格

if keyword:
df=df[(df["姓名"]==keyword) | (df["学号"]==keyword)]

returnrender(request,"show2.html",{dg:df})运行程序。在搜索框中输入学号或姓名，点击搜索，表示搜索结果。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/6957d25716164a0d8cb09261945a6c6f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744684&x-signature=JcjQ8o2gKfpBYQBguNzNFakFQfY%3D" style="width: 50%; margin-bottom: 20px;"></div>

页: [1]

天涯论坛's Archiver

Django研发网站-5-运用bootstrap模板美化前端页面