本文共 2141 字，大约阅读时间需要 7 分钟。

—————————————————————————前言——————————————————————————

Bootstrap： Twitter开发的一个开源框架， 它提供的用户组件可用于创建整洁且具有吸引力的网页， 这些网页还能兼容所有现代web浏览器。

Bootstrap只是客户端框架， 不会直接涉及服务器。 服务器需要做的只是提供引用了Bootstrap层叠样式表（CSS）和Javascript文件的HTML响应， 并在HTML， CSS和Javascript代码中实例化所需组件。这些操作最理想的执行场所就是我们上节提到的模板。

——————————————————————————————————————————————————————

2.5节我们讲过为什么需要扩展和怎样安装扩展， 我们来简单回忆一下：

1. 使用pip安装扩展包

2. 修改程序文件hello.py， 初始化扩展

下面我们就来安装Flask-Bootstrap扩展

一. 安装Flask-Bootstrap扩展

1. 安装扩展包， 如图：

2. 修改程序文件hello.py， 对扩展初始化：

from flask.ext.bootstrap import Bootstrap

#...

bootstrap = Bootstrap(app)

    扩展包总是从flask.ext包里导入， 这里我们从bootstrap模块导入Bootstrap类， 并且把程序实例对该类进行实例化。

    规律： 我们发现除了初始化扩展总是从flask.ext包里导入， 而且python命名规则是模块名的第一个字母是小写， 类名第一个字母都是大写。

二. 使用Flask-Bootstrap扩展

    初始化扩展后， 我们就可以在程序中使用一个包含所有Bootstrap文件的基模板。（这里的文件是什么意思呢， 写过html的朋友会知道， 网页除了html语言这些静态内容， 还包括网页化妆器CSS还有动态部分javascript， 这两部分都是作为文件和html代码分开的， 通过标签<link>和<script>引入网页文件，我们有了Bootstrap提供的基模板， 也就有了它提供的所有文件）

    这个基模板采取的机制和我们上一节讲的继承机制是一样的， 我们可以用自己的模板来扩展基模板， 如下（user.html）:

{% extends 'bootstrap/base.html' %}{% block title %}Flasky{% endblock %}{% block navbar %}#role属性告诉Accessibility类应用这个元素所扮演的角色，主要是供残疾人使用。使用role可以增强文本的可读性和语义化。
   {% endblock %}{% block content %}
   
    
    
        
     
Hello, {
  { name }}
    
    
   
{% endblock %}

除了这三个块， Flask-Bootstrap还定义了很多其它块， 都可在衍生模板中使用：

注意：BootStrap所需的文件再styles和scripts块中声明， 如果衍生模板需要往里添加内容， 不能覆盖基文件的内容：

{% block scripts %}{
  { super() }}{% endblock %}

1.迁出成功以后运行服务器：

2.用浏览器访问网页：