位置: 编程技术 - 正文

一个基于flask的web应用诞生 bootstrap框架美化(3)(基于flask的开源项目)

编辑:rootadmin

推荐整理分享一个基于flask的web应用诞生 bootstrap框架美化(3)(基于flask的开源项目),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:使用flask开发简单博客,flask基础,flask基础,基于flask的开源项目,flask例程,flask 示例,基于flask框架,flask基础,内容如对您有帮助,希望把文章链接给更多的朋友!

经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的bootstrap框架

安装框架

在模板中直接引用bootstrap的CDN或者本地路径外,还可以直接应用flask的bootstrap集成包,首先需要对集成包进行安装:

pip3.6 install flask-bootstrap

这是一个flask的扩展包,flask的所有扩展包默认默认的包名都为flask.ext打头,同样bootstrap也是如此,首先在default的文件的头部导入包:

from flask.ext.bootstrap import Bootstrap

然后对bootstrap进行初始化,修改代码:

bootstrap=Bootstrap(app)

初始化之后,就可以使用Jinja2的继承方式使用此包中的包含的一系列的针对Bootstrap的基模板。基模板中直接引用了一系列的bootstrap中的元素。

还记得如何在jinja2中使用模板继承吧,下面在使用之前,首先看看基模板的结构:

从源码中可以看出,这个基模板定义了个block,分别对应了整个文档(doc),html属性(html_attribs),整个html(html),整个head部分(head),title部分(title),meta代码部分(metas),css样式(styles),body属性(body_attribs),body部分(body),导航(navbar),页面内容(content),js(scripts)

并且title,meta,css,和js均有默认的内容,所以使用的时候需要加入{{super()}}

好,根据这个基模板的结构,修改login.html中的代码为:

运行程序,现在的显示结果为:

比刚刚漂亮多了,这时生成的html代码为:

注意这几个cdn的地址,这个地址有时候会被挡在墙外,这时怎么办呢?

修改的方式为在python的安装目录下找到Libsite-packagesflask_bootstrap文件夹,文件夹下有__init__.py文件,打开后看到如下代码:

进行修改,顺便提一下,我比较常使用bootcdn这个cdn服务器

下面使用土法进行一下测试,输入test和后的结果为:

一个基于flask的web应用诞生 bootstrap框架美化(3)(基于flask的开源项目)

显示的还是之前的测试登录成功页,这显然是不对的,一般来说,bbs或blog都是跳到登录前的页面或者首页,现在为了方便起见,都跳转到首页,同时,如果用户名或密码错误,也要在登录页进行提示,修改default.py代码如下:

登录成功后的源码为:

哦,对了,没有引用bootstrap的基模板,修改index.html的模板代码,将第一行的

{% extends "base.html" %}

修改为

{% extends "bootstrap/base.html" %}

刷新为:

看到已经成功引用了bootstrap框架,但是导航部分全部都没有,这时当然不能在写一遍导航,直接修改自定义的基模板,然后让其他模板引用即可,修改基模板为:

然后修改首页代码:

修改登录页代码为:

下面登录成功页的显示结果为:

页面风格与登录页保持了一致,但是,目前还是如果用户名密码错误(即输入的不是test和),那么除了和刚刚一样返回一个登录错误的字符串之外,用户是无法获悉的,就需要一个反应用户状态的方法,这一点,flask提供了flash函数,下面继续修改default.py文件:

修改login.html模板:

好下面输入test和,显示结果为:

状态很完美的显示出来。

继续美化

登录的页面和控制器的基本功能都已经完成,但是仅仅就现在这个页面来说,没有登录框占整个屏幕的,一般来说,都是居中的一部分,这块不涉及flask的部分,轮到bootstrap的栅格系统登场了。

栅格系统简单说就是将一个container或container-fluid中分为个列,每个列都可以合并或偏移,与html中的table类似,并且支持响应式,通过xs,sm,md,lg来进行不同屏幕尺寸的区分。下面用栅格系统对登录页进行一下修改:

显示结果如下:

毕竟不是专业美工,没有经过设计,但至少比刚刚美观多了,但登录的用户名和密码写成固定值肯定是不行的,数据库是必不可少的,将在下一章让flask和mysql进行互联。

标签: 基于flask的开源项目

本文链接地址:https://www.jiuchutong.com/biancheng/377117.html 转载请保留说明!

上一篇:一个基于flask的web应用诞生 使用模板引擎和表单插件(2)(flask开发实例)

下一篇:一个基于flask的web应用诞生 flask和mysql相连(4)(基于flask框架)

  • 行政事业单位转账至个人账户条例
  • 证券交易印花税税率是多少
  • 租入厂房再转租账要怎么做
  • 如何判断固定资产资本化还是费用化
  • 贷款服务可以抵扣增值税吗
  • 个人资金借给企业
  • 支付外汇货款
  • 关联交易措施
  • 外币投入的资本
  • 开具简易计税房租发票怎样填写增值税申报表
  • 发工资四舍五入可以吗
  • 医院减免医药费后还可以报保险吗
  • 收到样品费计入什么科目
  • 中国铁路建设债券
  • 购销合同印花税最新政策2023
  • 金税盘全额抵扣分录怎么做
  • 建筑企业无票支出如何处理
  • 公司注销对外投资股权有效吗
  • 公司对外租赁
  • 如何在Win11上查看所有用户帐户
  • mac u盘
  • 社保增加人员网上申报
  • 收到一张增值税红冲发票
  • 联想笔记本在bios中怎么把图标和字变大
  • win10怎么显示隐藏的硬盘
  • drvmgr.exe
  • 工伤个人承担的费用
  • 预收账款可以挂账多久
  • 运输企业成本核算内容有哪些?
  • 移动列表格
  • 扣缴义务人的法律地位
  • “从零开始”
  • php使用什么开发工具
  • 前端已死?金三银四?你收到offer了吗?
  • vue3 响应式ui框架
  • php环境怎么搭
  • 普通发票可以跨年报销吗
  • 进项税额转出加计抵减会计分录
  • java数组合并变字符串
  • 电缆租赁发票开具属于什么项目
  • 负债类科目有借贷方向吗
  • 增值税税率调整为13%从什么时候开始实行
  • 工会经费和残保金计入什么科目
  • 收到国家电网信息但号码不是的
  • 汽车运输企业交什么税
  • 现金折扣怎么做账
  • 现在增值税是多少个点
  • 税控系统专用设备包括税控收款机吗
  • 出售固定资产已开票未收款账务处理
  • 对公账户付个人工资怎么入账
  • 项目过路费应该挂什么科目
  • 普票冲红需要收回原来的发票吗
  • 普票的销项负数怎么开
  • 发票没交税可以报销吗
  • 赠送的产品价格为发票金额为零怎么入库
  • 如何控制自己不磨牙
  • sql server key
  • Centos下Mysql安装图文教程
  • win8.1应用商店还能用吗
  • win10系统便签突然无法打开
  • 电脑游戏战争策略游戏
  • win8设备管理器在哪里打开
  • 定制xp系统
  • win8开机进入开始界面
  • windows10周年更新
  • win7开机提示由于启动计算机时出现页面文件
  • win8找不到恢复环境怎么恢复出厂设置
  • 关于我和鬼变成家人的那件事
  • css实现放大缩小的动画效果
  • linux bash shell中case语句的实例
  • linux的syslog配置
  • javascript例题
  • PYTHON使用缩进来体现代码之间的逻辑关系
  • 怎么用git上传项目
  • android xmlns
  • 国家河南税务局
  • 个人怎么在网上交医保和养老保险
  • 税务局登记是什么
  • 分支机构如何变更为独立纳税人?
  • 承租房变更承租人申请怎么写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设