Flask------使用BootStrap快速搭建前端页面

我们先整理一下之间写的代码,删除不需要的注释和测试的代码。

做一个用户管理系统
在这里插入图片描述

在templates中新建一个regist.html页面,这样我们就简单的先完成了注册页和首页,但是我们的页面是没有样式的,看起来很丑,所以我们需要添加css和js
在这里插入图片描述

将index.html做为模板页,我们重新命名为form.html,然后再新建一个index.html页面
在这里插入图片描述
form.html的页面的head做为模板,粘贴复制到index和regist中
在这里插入图片描述

再把静态资源引进来
在这里插入图片描述
在这里插入图片描述

接下来就要来body里写代码
在这里插入图片描述

在bootstrap的中文文档中有详细可用的代码块,又来快速搭建前端页面
在这里插入图片描述
在这里插入图片描述
我们先做导航条
在这里插入图片描述
通过查看源代码,将导航条的源代码拷贝下来
在这里插入图片描述

查看前端页面,删除不需要的内容,并修改字段信息,改为首页、登录、注册、退出
在这里插入图片描述
折叠起来后粘贴复制到index.html
在这里插入图片描述

再来看看前端页面
在这里插入图片描述
以上,如果前端知识不太清楚,那就么得办法了。

发布了65 篇原创文章 · 获赞 41 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/weixin_43870646/article/details/97897097
今日推荐