flask入门和进阶八（美化页面,Bootstrap）

最新推荐文章于 2025-04-15 10:46:54 发布

转载最新推荐文章于 2025-04-15 10:46:54 发布 · 3.3k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/weixin_38256474/article/details/81779883

收录于

flask

本文介绍如何利用Bootstrap CSS框架简化Flask应用的界面设计，包括安装Flask-Bootstrap扩展、调整基础模板以适应Bootstrap，以及如何使用宏快速渲染表单。

创建一个漂亮的网页是一个很大的主题，而与web 后端开发很大程度上无关。因此我们将讨论一些基本指导和想法，将重新设计应用的外观。

CSS框架

只是一个想创建规范网页的开发人员，没有时间或兴趣去学习底层机制，并通过编写原生HTML和CSS来实现它，那么唯一可行的解决方案是使用CSS框架来简化任务。通过这条路径，将失去一些操作自由，但另一方面，我们的网页在所有浏览器中会看起来很不错，而也不需要花费太多精力。CSS框架为普通类型的用户界面元素提供了高级CSS类的集合，其中包含预定义样式。这些框架中的大多数还为不能使用HTML和CSS严格执行的操作提供JavaScript插件

Bootstrap

最受欢迎的一个CSS框架是由Twitter建立的Bootstrap。如果想看使用这个框架设计的页面类型，可查看文档中的示例。

使用Bootstrap为网页设置样式的好处：

在所有主流Web浏览器上看起来相似；
处理台式机、平板电脑、手机屏幕尺寸；
可定制布局；
风格精美的导航栏、表单、按钮、提示、弹出窗口等

使用Bootstrap最直接方法是在基础模板中导入 bootstrap.min.css文件。可以下载这个文件副本，并将其添加到项目中；也可以直接从CDN导入（这里查看）。然后，可以根据文档开始使用它提供的通用CSS类。还可以导入包含框架JavaScript代码的bootstrap.min.js文件，以便使用更高级的功能。

幸运的是，有一个名为 Flask-Bootstrap的Flask扩展，它提供一个随时可用的基本模板，它安装了Bootstrap框架。安装这个扩展：版本3.3.7.1；附带安装dominate 2.3.1（用于使用优雅的DOM API创建和操作HTML文档）、visitor 0.1.3（一个微型Pythonic访客实现）。

使用flask-Bootstrap

初始化扩展后，bootstrap/base.html模板变为可用，并可以使用extends子句从应用程序模板中引用。

但是记得，我已经使用了extends子句继承自己的基础模板，这允许将页面的公共部分放在一个地方。我的 base.html模板定义了导航栏，其中包含一些链接，还导出了一个content块。目前为止，应用程序中所有其他模板都是从基础模板继承，并为content块提供页面的主要内容。

那么，该如何适应 Bootstrap基础模板呢？想法是使用三级层次结构，而不是两层。bootstrap/base.html模板提供页面的基本结构，其中包含Bootstrap框架文件。这个模板为了派生模板导出几个块，如title、navbar、content（查看完整的块列表）。我将更改我的base.html模板，让它从bootstrap/base.html模板派生，并为title、navbar、content块提供实现。反过来，base.html将为了它派生模板去定义页面内容而导出自己的app_content块。

下面将看到base.html在修改后如何从bootstrap基础模板继承

app/templates/base.html：重新设计基础模板

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

{% block title %}
	{% if title %}
		{{ title }} - Microblog
	{% else %}
		Welcome to Microblog
	{% endif %}
{% endblock %}

{% block navbar %}
	<nav class="navbar navbar-default">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="{{ url_for('index') }}">Microblog</a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="{{ url_for('index') }}">Home</a></li>
					<li><a href="{{ url_for('explore') }}">Explore</a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					{% if current_user.is_anonymous %}
						<li><a href="{{ url_for('login') }}">Login</a></li>
					{% else %}
						<li><a href="{{ url_for('user', username=current_user.username) }}">Profile</a></li>
						<li><a href="{{ url_for('logout') }}">Logout</a></li>
					{% endif %}
				</ul>
			</div>
		</div>
	</nav>
{% endblock %}

{% block content %}
	<div class="container">
		{% with messages = get_flashed_messages() %}
			{% if messages %}
				{% for message in messages %}
					<div class="alert alert-info" role="alert">{{ message }}</div>
				{% endfor %}
			{% endif %}
		{% endwith %}

		{# application content needs to be provided in the app_content block #}
		{% block app_content %}{% endblock %}
	</div>
{% endblock %}

在上述代码中，可看到如何从bootstrap/base.html派生这个模板，然后分别实现页面标题、导航栏、页面内容三个块。

title 块 使用 <title>标签定义将用于页面标题的文本。对于个块，只是移动了在原始基础模板中<title>标签内的逻辑。

navbar 块 是可选块，可用于定义导航栏。对于这个块，在Bootstrap导航栏文档中的改写了这个示例，以便它在左端包含站点标记，接着是 Home 和Explore链接。然后，添加了与页面右边框对齐的Profile和Login或Logout链接。

最后，在content块中定义了一个顶级容器，在其中编写了渲染闪烁消息的逻辑，现在它们显示为Bootstrap警报。接着是一个新的app_content块，它被定义为只有派生模板才能定义它们自己的内容。

所有页面模板的原始版本都在名为content的块中定义它们的内容。如上所示，名为content的块被Flask-Bootstrap所使用，因此将内容块重命名为app_content。所以，我们所有的模板都必须重命名才能去使用app_content块作为它们的内容块。例如，如下是404.html模板如何修改版本的演示：（其他页面类似）