Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架。Werkzeug用来处理Socket服务,其在Flask中被用于接受和处理http请求;Jinja2被用来对模板进行处理,将模板和数据进行渲染,返回给用户的浏览器。
Bootstrap是由Twitter推出的一个用于前端开发的开源工具包,给予HTML、CSS、JavaScriot,提供简洁、直观、强悍的前端开发框架,是目前最受环境的前端框架。
前面一篇文章已经讲到了,如何通过flask将不同URL的http请求,对应到不同的python函数、不同的html等。
那么下面我们来讲讲,怎么利用Bootstrap框架,快速提供我们想要的前端页面。
由于博主不是专门做这个的,所以下面的内容只是博主的一些理解和实际使用过程中的一些方法,并不能保证完全正确。
首先安装bootstrap扩展
pip install flask-bootstrap
模板的继承
安装完成后,我们可以看到在 \venv\Lib\site-packages\flask_bootstrap\templates\bootstrap路径下,看到bootstrap的一些基础模板
直接通过浏览器打开,会看到html文本的内容,接下来需要将这些模板通过Flask 调用jinja2进行渲染(这一段为博主猜测)
在程序中,导入bootstrap并进行初始化
from flask_bootstrap import Bootstrap
from flask.ext.bootstrap import Bootstrap
bootstrap=Bootstrap(app)
在项目根目录的template目录中,创建html模板,并继承上文中bootstrap这个目录下的base.html
采用继承的这种模式,我们便可以使用在base.html中定义好的块
在app.py中,设置URL“/test”返回该test模板
@app.route('/test')
def test():
return render_template('test.html')
程序运行试一下:
这时可以看到,网页中什么都没有,这是因为我们在test.html文件中,没有使用任何块
我们看一下/bootstrap/base.html中有哪些块可以让我们使用:
{% 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 -%}
由此,我们可以看到,我们可以使用包括head、style、metas、body、navbar、content等等
我们可以利用菜鸟教程网站的一些示例,尝试一下这些块的编写方法,
我们可以试一下导航元素 网址如下:https://www.runoob.com/bootstrap/bootstrap-navigation-elements.html
我们可以尝试,带有下拉菜单的标签页,复制菜鸟教程中的html代码,粘贴在{% block navbar %}{%- endblock navbar %}之间
我们看一下效果:
可以看到,这达到了我们想要的效果,依次类推,我们可以自己定义导航栏的内容,以及其他块的内容等等。
我们可以结合bootstrap网站上的实际案例,定制我们自己想要的网页效果
https://v3.bootcss.com/getting-started/#examples
下面看一下我最终的代码与实现的效果
{% extends "bootstrap/base.html" %}
{%- block head %}
网络自动化管理—欢迎页!
{%- block styles %}
{# #}
{%- endblock styles %}
{%- endblock head %}
{% block body -%}
{% block navbar %}
{%- endblock navbar %}
{% block content -%}
{%- endblock content %}
{% block scripts %}
{# #}
{# #}
{%- endblock scripts %}
{%- endblock body %}
总结
通过这篇文章,我们掌握到了基本的如何利用Bootstrap框架,快速高效的设计我们的网页
下一篇,我们讲讲如何将页面上的元素与后台应用程序进行联动