使用flask-bootstrap美化web应用

PDF格式 | 170KB | 更新于2024-08-29 | 125 浏览量 | 举报

本资源是关于使用Flask框架结合Bootstrap构建Web应用的教程，主要讲解如何通过Flask-Bootstrap扩展来提升网页的美观性。在上一章节中，虽然已经实现了基本的功能，但在视觉设计上还有待加强。教程推荐使用Bootstrap作为CSS框架，因为它与Flask有良好的集成性。在这一部分，我们将学习如何安装和配置Flask-Bootstrap扩展。首先，我们需要通过Python的包管理器pip来安装这个扩展。在命令行中输入以下命令： ``` pip3.6 install flask-bootstrap ``` 安装完成后，我们需要在Flask应用的主文件（通常是`app.py`或`__init__.py`）中引入Bootstrap扩展。在文件顶部添加以下代码： ```python from flask.ext.bootstrap import Bootstrap ``` 接下来，我们需要初始化Bootstrap扩展，这样我们才能在模板中使用它。在应用初始化的地方（通常是在创建`app`对象后），添加以下代码： ```python bootstrap = Bootstrap(app) ``` 初始化Bootstrap后，我们可以利用Jinja2模板引擎的继承特性，使用Bootstrap提供的基模板。这些基模板包含了Bootstrap框架的核心样式和组件。例如，基模板会包含HTML的头部信息，引用Bootstrap的CSS文件等。在Jinja2模板中，你可以定义自己的布局，通过`block`和`extend`来覆盖或添加基模板中的内容。比如，你可以自定义网页的标题、元数据、样式表以及脚本。下面是一个基本的Jinja2模板结构示例： ```html {% 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 %} {%- endblock head %} <body{% block body_attribs %}{% endblock body_attribs %}> {%- block body -%} {%- endblock body %} {%- block scripts %}   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> {%- endblock scripts %} {%- endblock html %} {%- endblock doc %} ``` 通过这样的方式，你可以轻松地将Bootstrap的样式和功能整合到Flask应用中，创建出美观且响应式的界面。Bootstrap提供了各种组件，如导航栏、按钮、表单、栅格系统等，可以帮助开发者快速搭建界面，而无需从零开始编写CSS。在实际开发中，可以根据需求灵活使用这些组件，以提升用户体验。在接下来的内容中，你可能会学习如何在Flask模板中使用Bootstrap的表单组件，如`form`、`input`、`label`、`placeholder`等，以及如何创建响应式布局。这将帮助你构建出专业级别的Web应用界面。

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

经过上一章的内容，其实就页面层来说已结可以很轻松的实现功能了，但是很明显美观上还有很大的欠缺，现在有一些很好的前端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 %}

导航

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

weixin_38653508

粉丝: 2

使用flask-bootstrap美化web应用

利用Flask、Dash和Bootstrap打造完整web应用

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

基于Flask和Bootstrap的CRUD Web应用开发教程

一个基于flask的web应用诞生（1）

一个基于flask的web应用诞生 flask和mysql相连（4）

一个基于flask的web应用诞生 用户注册功能开发（5）

Flask-Articles-App：这是一个基于Flask框架，Bootstrap和MySQL构建的Web应用程序，允许用户上传和编辑文章

一个基于Flask、MySQL和Bootstrap开发的图片分享社交网站。.zip

Flask-ToDo-App:基于Flask Web框架的Todo任务Web应用

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

最新资源

一个基于flask的web应用诞生用户注册功能开发（5）