—————————————————————————前言——————————————————————————
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可以增强文本的可读性和语义化。
<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="/">Flasky</a>
</div>
<div>
<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 %}
我们用三个块title, navbar和content, 分别定义了网页的标题, 导航条和页面内容。
除了这三个块, Flask-Bootstrap还定义了很多其它块, 都可在衍生模板中使用:
块名 | 说明 |
doc | 整个HTML文档 |
html_attribs | <html>标签的属性 |
html | <html>标签的内容 |
head | <head>标签的内容 |
title | <title>标签的内容 |
metas | 一组<meta>标签 |
styles | 层叠样式表定义 |
body_attribs | <body>标签的属性 |
body | <body>标签中的内容 |
navbar | 用户定义的导航条 |
content | 用户定义的页面内容 |
scripts | 文档底部的JavaScript说明 |
注意:BootStrap所需的文件再styles和scripts块中声明, 如果衍生模板需要往里添加内容, 不能覆盖基文件的内容:
{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}
三. 第二点只是理论介绍, 实际操作只需要把3b版本迁到工作区即可:
1.迁出成功以后运行服务器:
2.用浏览器访问网页: