0

0

关于bootstrap框架美化的实例教程(python)

PHPz

PHPz

发布时间:2017-04-26 10:19:23

|

4430人浏览过

|

来源于php中文网

原创

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

【相关视频推荐:Bootstrap教程

安装框架

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

pip3.6 install flask-bootstrap

立即学习Python免费学习笔记(深入)”;

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

from flask.ext.bootstrap import Bootstrap

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

bootstrap=Bootstrap(app)

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

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

{% block doc -%}


{%- block html %}
 
 {%- block head %}
 {% block title %}{{title|default}}{% endblock title %}

 {%- block metas %}
 
 {%- endblock metas %}

 {%- block styles %}
 
 
 {%- endblock styles %}
 {%- endblock head %}
 
 
 {% block body -%}
 {% block navbar %}
 {%- endblock navbar %}
 {% block content -%}
 {%- endblock content %}

 {% block scripts %}
 
 
 {%- endblock scripts %}
 {%- endblock body %}
 
{%- endblock html %}

{% endblock doc -%}

从源码中可以看出,这个基模板定义了12个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中的代码为:

{% extends "bootstrap/base.html"%}
{% block title%}牛博客 {% endblock %}
{% block navbar %}

{% endblock %}
{% block content %} 

{% endblock %}

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

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



 
 牛博客 
 
 
 
 
 
 
 
 

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

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

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

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

Skybox AI
Skybox AI

一键将涂鸦转为360°无缝环境贴图的AI神器

下载

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

from flask import session #导入session对象

@app.route("/login",methods=["POST"])
def loginPost():
 username=request.form.get("username","")
 password=request.form.get("password","")
 if username=="test" and password=="123" :
 session["user"]=username
 return render_template("/index.html",name=username,site_name='myblog')
 else:
 return "登录失败"

登录成功后的源码为:




 
 myblog


这个站点的名字为 myblog

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

{% extends "base.html" %}

修改为

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

刷新为:



 
 blog
 
 
 
 
 
 

这个站点的名字为 myblog

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

{%extends "bootstrap/base.html "%}
{% block title%}牛博客 {% endblock %}

{% block navbar %}

{% endblock %}
{% block content %} 

{% endblock %}

然后修改首页代码:

{% extends "base.html" %}

{% block content %}
 

这个站点的名字为 {{site_name}}

{% endblock %}

修改登录页代码为:

{% extends "base.html"%}
{% block content %} 

{% endblock %}

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

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

from flask import flash

@app.route("/login",methods=["POST"])
def loginPost():
 username=request.form.get("username","")
 password=request.form.get("password","")
 if username=="test" and password=="123" :
 session["user"]=username
 return render_template("/index.html",name=username,site_name='myblog')
 else:
 flash("您输入的用户名或密码错误")
 return render_template("/login.html") #返回的仍为登录页

修改login.html模板:

{% extends "base.html"%}
{% block content %} 

{% for message in get_flashed_messages() %}

{{message}}

{% endfor %}

{% endblock %}

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

状态很完美的显示出来。

继续美化

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

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

{% extends "base.html"%}
{% block content %} 

<#-- col-md-4表示合并4列,col-md-offset-4表示偏移4列 sm意思相同 --#>

欢迎您登陆

{% for message in get_flashed_messages() %}

{{message}}

{% endfor %}

{% endblock %}

显示结果如下:

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

相关文章

python速学教程(入门到精通)
python速学教程(入门到精通)

python怎么学习?python怎么入门?python在哪学?python怎么学才快?不用担心,这里为大家提供了python速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.9万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号