Flask Web开发实验二：模板（2）_bootstrap flask 模板下载-CSDN博客

Bootstrap（http://getbootstrap.com/）是 Twitter 开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代 Web 浏览器。

Bootstrap 是客户端框架，因此不会直接涉及服务器。服务器需要做的只是提供引用了

Bootstrap 层叠样式表（CSS）和 JavaScript 文件的 HTML 响应，并在 HTML、CSS 和 JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模板。

要想在程序中集成 Bootstrap，显然要对模板做所有必要的改动。不过，更简单的方法是使用一个名为 Flask-Bootstrap 的 Flask 扩展，简化集成的过程。

Flask-Bootstrap 使用 pip 安装：

(base) C:\Users\lenovo>d:

(base) D:\>conda activate python

(base) D:\>conda activate flask_dev

(flask_dev) D:\>pip install flask-bootstrap

如果你已经安装了 Flask-Bootstrap，但是仍然遇到此问题，请尝试在 python 终端中输入以下命令查看 Flask-Bootstrap 是否已被成功安装：如果打印出了版本号，则说明 Flask-Bootstrap 已正常安装。

Flask 扩展一般都在创建程序实例时初始化。示例 3-4 是 Flask-Bootstrap 的初始化方法。

示例 3-4 hello.py：初始化 Flask-Bootstrap

from flask.ext.bootstrap import Bootstrap

# ...

bootstrap = Bootstrap(app)

和第 2 章中的 Flask-Script 一样，Flask-Bootstrap 也从 flask.ext 命名空间中导入，然后把

程序实例传入构造方法进行初始化。

初始化 Flask-Bootstrap 之后，就可以在程序中使用一个包含所有 Bootstrap 文件的基模板。

这个模板利用 Jinja2 的模板继承机制，让程序扩展一个具有基本页面结构的基模板，其中就有用来引入 Bootstrap 的元素。示例 3-5 是把 user.html 改写为衍生模板后的新版本。

示例 3-5 templates/user.html：使用 Flask-Bootstrap 的模板

初始化 Flask-Bootstrap 之后，然后可以直接继承提供的 bootstrap/base.html 模板，其是一个包含了Bootstrap 文件和一般结构的基模板，衍生模板 user.html如下：

{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="/">Flask</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}
{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello, {
  { name }}!</h1>
    </div>
</div>
{% endblock %}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello,World!</h1>
</body>
</html>

完整hello.py如下：