Flask从入门到精通之Flask-Bootstrap的使用

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

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

pip install flask_bootstrap

  Flask 扩展一般都在创建程序实例时初始化,下面是Flask_Bootstrap的初始化方法

from flask.ext.bootstrap import Bootstrap
bootstrap = Bootstrap(app)

  初始化Flask-Bootstrap 之后,就可以在程序中使用一个包含所有Bootstrap 文件的基模板。这个模板利用Jinja2 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中就有用来引入Bootstrap 的元素。

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

{%block title %}Flask{% 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="/">Flasky</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 %}

  Jinja2 中的extends 指令从Flask-Bootstrap 中导入bootstrap/base.html, 从而实现模板继承。Flask-Bootstrap 中的基模板提供了一个网页框架,引入了Bootstrap 中的所有CSS 和JavaScript 文件。基模板中定义了可在衍生模板中重定义的块。block 和endblock 指令定义的块中的内容可添加到基模板中。上面这个user.html 模板定义了3 个块,分别名为title、navbar 和content。这些块都是基模板提供的,可在衍生模板中重新定义。title 块的作用很明显,其中的内容会出现在渲染后的HTML 文档头部,放在<title> 标签中。navbar 和content 这两个块分别表示页面中的导航条和主体内容。在这个模板中,navbar 块使用Bootstrap 组件定义了一个简单的导航条。content 块中有个<div> 容器,其中包含一个页面头部。之前版本的模板中的欢迎信息,现在就放在这个页面头部。运行结果如下图:    

Flask-Bootstrap 的base.html 模板还定义了很多其他块,都可在衍生模板中使用,下表列出了所有可用的块:

块名   说明
doc 整个html文档
html_attribs html标签属性
html   html标签中的内容
head head标签中的内容
title title标签中的内容
metas 一组meta标签
styles 层叠样式表定义
body_attribs body标签的属性
body body标签中的内容
navbar 用户定义的导航条
content 用户定义的页面内容
scripts 文档底部的JavaScript 声明

  上表中的很多块都是Flask-Bootstrap 自用的,如果直接重定义可能会导致一些问题。例如,Bootstrap 所需的文件在styles 和scripts 块中声明。如果程序需要向已经有内容的块中添加新内容,必须使用Jinja2 提供的super() 函数。例如,如果要在衍生模板中添加新的JavaScript 文件,需要这么定义scripts 块:

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}

原文地址:https://www.cnblogs.com/senlinyang/p/8351720.html

时间: 2024-10-08 13:13:13

Flask从入门到精通之Flask-Bootstrap的使用的相关文章

Flask从入门到精通之flask扩展

Flask被设计成可扩展形式,因此并没有提供一些重要的功能,比如数据库和用户认证,所以开发者可以自由选择最适合程序的包,或者按需求自行开发.社区成员开发了大量不同用途的扩展,如果这还不能满足需求,你还可使用所有Python 标准包或代码库.为了让你知道如何把扩展整合到程序中,接下来我们将在hello.py 中添加一个扩展,使用命令行参数增强程序的功能. 使用Flask-Script支持命令行选项 Flask 的开发Web 服务器支持很多启动设置选项,但只能在脚本中作为参数传给app.run()函

Flask从入门到精通之flask程序入门

初始化 所有Flask程序都必须创建一个程序实例,Web服务器使用一种名为Web服务器网关接口的的协议(WSGI),把接收自客户端的所有请求转发给这个对象处理.程序实例是Flask类的对象,使用下面代码构建 from flask import Flask app = FLask(__name__) Flask类的构造函数只有一个必须指定的参数,即程序主模块或则包的名称..在大多数程序中,Python 的__name__ 变量就是所需的值.将构造函数的name 参数传给Flask 程序,这一点可能

Flask从入门到精通之自定义错误界面

如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为404 的错误页面.现在这个错误页面太简陋.平庸,而且样式和使用了Bootstrap 的页面不一致. 像常规路由一样,Flask 允许程序使用基于模板的自定义错误页面.最常见的错误代码有两个:404,客户端请求未知页面或路由时显示:500,有未处理的异常时显示.为这两个错误代码指定自定义处理程序的方式如下: @app.errorhandler(404) def page_not_found(e): return render_te

Flask从入门到精通之Flask-Moment本地化日期和时间

Moment.js 是一个简单易用的轻量级JavaScript日期处理类库,提供了日期格式化.日期解析等功能.它支持在浏览器和NodeJS两种环境中运行.此类库能够 将给定的任意日期转换成多种不同的格式,具有强大的日期计算功能,同时也内置了能显示多样的日期形式的函数.Flask-Moment是一个集成moment.js到Jinja2模板的Flask扩展.安装Flask-Moment的方式如下: pip install Flask-Moment 初始化Flask-Moment from flask

Flask从入门到精通之静态文件

Web 程序不是仅由Python 代码和模板组成.大多数程序还会使用静态文件,例如HTML代码中引用的图片.JavaScript 源码文件和CSS. 在前面的章节中,我们曾检查hello.py 程序的URL 映射时,其中有一个static 路由.这是因为对静态文件的引用被当成一个特殊的路由,即/static/<?filename>.例如,调用url_for('static', filename='css/styles.css', _external=True) 得到的结果是http://loc

Flask从入门到精通之使用Flask-Migrate实现数据库迁移

在开发程序的过程中,你会发现有时需要修改数据库模型,而且修改之后还需要更新数据库.仅当数据库表不存在时,Flask-SQLAlchemy 才会根据模型进行创建.因此,更新表的唯一方式就是先删除旧表,不过这样做会丢失数据库中的所有数据.更新表的更好方法是使用数据库迁移框架.源码版本控制工具可以跟踪源码文件的变化,类似地,数据库迁移框架能跟踪数据库模式的变化,然后增量式的把变化应用到数据库中. SQLAlchemy 的主力开发人员编写了一个迁移框架,称为Alembic(https://alembic

Flask从入门到精通之大型程序的结构一

尽管在单一脚本中编写小型Web 程序很方便,但这种方法并不能广泛使用.程序变复杂后,使用单个大型源码文件会导致很多问题.不同于大多数其他的Web 框架,Flask 并不强制要求大型项目使用特定的组织方式,程序结构的组织方式完全由开发者决定.在本节,我们将介绍一种使用包和模块组织大型程序的方式. 一.项目结构 Flask 程序的基本结构如下所示: |-blogs |-app/ |-templates/ |-static/ |-main/ |-__init__.py |-errors.py |-fo

Flask 从入门到实践

Flask 从入门到实践 路由的介绍 程序实例保存了一个URL到Python程序的映射关系,处理URL和函数之间关系的程序成为路由. 使用程序实例的app.route装饰器即可把要修饰的函数(可称为视图函数,下例中为index(),user())注册为路由. from flask import Flask from flask import request app = Flask(__name__) @app.route('/') def index(): return '<h1>Hello

【转】Flask快速入门

迫不及待要开始了吗?本页提供了一个很好的 Flask 介绍,并假定你已经安装好了 Flask.如果没有,请跳转到 安装 章节. 一个最小的应用 一个最小的 Flask 应用看起来会是这样: from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World!' if __name__ == '__main__': app.run() 把它保存为 hello.py