Flask与Bootstrap整合打造美观Web应用

71 浏览量更新于2024-09-01 收藏 170KB PDF 举报

"Flask与Bootstrap的整合教程" 在开发Web应用时，界面的美观性和用户体验至关重要。在基于Python的Flask框架下，我们可以利用Bootstrap这一流行且强大的前端框架来提升网页设计的质量。本篇文章主要讲解如何将Bootstrap与Flask进行整合，以实现更高效的Web应用开发。 Bootstrap是一款开源的前端框架，它提供了丰富的组件和预定义的样式，能够快速构建响应式、移动设备优先的网页。在Flask应用中集成Bootstrap，可以让我们在不牺牲性能的情况下，轻松创建专业级别的用户界面。首先，为了在Flask应用中使用Bootstrap，我们需要安装`flask-bootstrap`这个扩展包。通过运行以下命令来安装： ```bash pip3.6 install flask-bootstrap ``` 安装完成后，在Flask应用的主文件（通常是`app.py`或`__init__.py`）中引入`flask-bootstrap`： ```python from flask.ext.bootstrap import Bootstrap ``` 接着，初始化Bootstrap对象，将它与你的Flask应用关联起来： ```python bootstrap = Bootstrap(app) ``` 初始化后，你可以利用Jinja2模板引擎的继承特性，使用`flask-bootstrap`提供的基模板。这些基模板已经包含了Bootstrap框架的基本元素，如CSS和JavaScript库，从而减少了手动添加引用的工作量。基模板的结构通常如下所示： ```jinja2 {% block doc -%} <!DOCTYPE html> <html{% block html_attribs %}{% endblock html_attribs %}> {%- block html %} <head> {%- block head %} <title>{% block title %}{{ title|default }}{% endblock title %}</title> {%- block metas %} <meta name="viewport" content="width=device-width, initial-scale=1.0"> {%- endblock metas %} {%- block styles %}  <link href="{{ bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap') }}" rel="stylesheet"> {%- endblock styles %} ... ``` 在这个模板中，`bootstrap_find_resource`函数用于自动找到Bootstrap的资源文件，如CSS和JavaScript，你可以选择使用CDN（内容分发网络）或者本地路径。接下来，你可以创建自己的视图模板，并继承自定义的基模板，这样就可以方便地在你的页面中使用Bootstrap的各种组件，如导航栏、按钮、表单等。例如，创建一个简单的页面模板`base.html`，并定义一个子区块`body`： ```jinja2 {% extends "base.html" %} {% block body %} <div class="container"> <h1>Hello, World!</h1>  </div> {% endblock body %} ``` 这样，你就可以在Flask应用中享受到Bootstrap带来的强大功能，同时保持代码的简洁和模块化。通过这个教程，你不仅学会了如何整合Flask和Bootstrap，还了解了如何在Jinja2模板中使用继承，以及如何利用`flask-bootstrap`扩展包简化资源引用。继续实践，你将能够创建出更加美观和交互友好的Web应用。

一个基于一个基于flask的的web应用诞生应用诞生 bootstrap框架美化（框架美化（3））

一个基于flask的web应用诞生第三篇，这篇文章主要介绍了前端框架bootstrap与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 -%}

<!DOCTYPE html>

<html{% block html_attribs %}{% endblock html_attribs %}>

{%- block html %}

<head>

{%- block head %}

<title>{% block title %}{{title|default}}{% endblock title %}</title>

{%- block metas %}

{%- endblock metas %}

{%- block styles %}

{%- endblock styles %}

{%- endblock head %}

</head>

<body{% block body_attribs %}{% endblock body_attribs %}>

{% block body -%}

{% block navbar %}

{%- endblock navbar %}

{% block content -%}

{%- endblock content %}

{% block scripts %}

{%- endblock scripts %}

{%- endblock body %}

</body>

{%- endblock html %}

</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 %}

导航

</nav>

{% endblock %}

{% block content %}

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38506182

粉丝: 3
资源: 942

Flask与Bootstrap整合打造美观Web应用

Python-大型FLaskCMS管理系统

Python-基于flask的快速开发WebAPI的框架

flask-pixel-bootstrap-uikit：Flask像素UI套件-用Flask编码的开源Web应用| 应用种子

基于Flask框架，使用Bootstrap设计一个可以实现前后端交互的图表

基于Flask框架，使用Bootstrap设计一个图表，显示给后端的数据

解释from flask_bootstrap import Bootstrap中Bootstrp()

基于python + flask + pyecharts + bootstrap可视化平台

新版本flask-bootstrap没有Bootstrap4

flask-bootstrap如何使用

flask bootstrap 详细案例

最新资源