带你认识 flask 美化

点击上方蓝字关注我们

欢迎关注我的公众号，志学Python

01

CSS 框架

虽然我们可以争辩说写代码不容易，但是与那些必须让网页在所有Web浏览器上具有良好一致外观的网页设计师相比，我们的痛苦不值一提。虽然近年来这种情况得到一定程度的缓解，但是在一些浏览器中仍然存在着晦涩的错误或奇怪的设定，这使得设计网页的任务变得非常困难。如果还需要兼容屏幕限制设备（诸如平板电脑和智能手机）的浏览器，则更加困难。

如果你和我一样，只是一个想创建出规范网页的开发人员，没有时间或兴趣去学习底层机制并通过编写原生HTML和CSS来实现它，那么唯一可行的解决方案是使用CSS框架来简化任务。通过这种方式，你会失去一些创造性的自由，但另一方面，无需通过太多的功夫就可以让网页在所有浏览器中看起来都不错。CSS框架为普通类型的用户界面元素提供了高级CSS类的集合，其中包含预定义样式。大多数这样的框架还提供JavaScript插件，以实现不能纯粹使用HTML和CSS来完成的功能。

02

bootstrap 简介

最受欢迎的CSS框架之一是由Twitter推出的Bootstrap。如果你想看看这个框架可以设计的页面类型，文档有一些示例。

这些是使用Bootstrap来设置网页风格的一些好处：

• 在所有主流网页浏览器中都有相似的外观

• 自动处理PC桌面，平板电脑和手机屏幕尺寸

• 可定制的布局

• 精心设计的导航栏，表单，按钮，警示，弹出窗口等

使用Bootstrap最直接的方法是简单地在你的基本模板中导入bootstrap.min.css文件。可以下载此文件并将其添加到你的项目中，或直接从CDN导入。然后，你可以根据其文档开始使用它提供的通用CSS类，实在是太棒了。你可能还需要导入包含框架JavaScript代码的bootstrap.min.js文件，以便使用最先进的功能。

幸运的是，有一个名为Flask-Bootstrap的Flask插件，它提供了一个已准备好的基础模板，该模板引入了Bootstrap框架。让我们来安装这个扩展：

(venv) $ pip install flask-bootstrap

03

使用 flask-bootstrap

Flask-Bootstrap需要像大多数其他Flask插件一样被初始化：

app/__init__.py: Flask-Bootstrap实例。

# ...from flask_bootstrap import Bootstrap
app = Flask(__name__)# ...bootstrap = Bootstrap(app)

在初始化插件之后，bootstrap/base.html模板就会变为可用状态，你可以使用extends子句从应用模板中引用。

但是，回顾一下，我已经使用了extends子句来继承我的基础