3.2、使用Flask-Bootstrap集成Twitter Bootstrap
Bootstrap(http://getbootstrap.com/)是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器。
Bootstrap 是客户端框架,因此不会直接涉及服务器。服务器需要做的只是提供引用了Bootstrap 层 叠 样 式 表(CSS) 和 JavaScript 文 件 的 HTML 响 应, 并 在 HTML、CSS 和JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模板。
要想在程序中集成 Bootstrap,显然要对模板做所有必要的改动。不过,更简单的方法是使用一个名为 Flask-Bootstrap 的 Flask 扩展,简化集成的过程。Flask-Bootstrap 使用 pip 安装:
(venv)[user@localhost test]$ pip install flask-bootstrap
Flask 扩展一般都在创建程序实例时初始化。示例 3-4 是 Flask-Bootstrap 的初始化方法。
示例 3-4 hello.py:初始化 Flask-Bootstrap
from flask_bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)
和第 2 章中的 Flask-Script 一样,Flask-Bootstrap 也从 flask_ 命名空间中导入,然后把程序实例传入构造方法进行初始化。初始化 Flask-Bootstrap 之后,就可以在程序中使用一个包含所有 Bootstrap 文件的基模板。这个模板利用 Jinja2 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中就有用来引入 Bootstrap 的元素。示例 3-5 是把 user.html 改写为衍生模板后的新版本。
示例 3-5 templates/user.html:使用 Flask-Bootstrap 的模板
{% 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="/">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 模板还定义了很多其他块,都可在衍生模板中使用。表 3-2 列出了所有可用的块。
表 3-2 中的很多块都是 Flask-Bootstrap 自用的,如果直接重定义可能会导致一些问题。例如,Bootstrap 所需的文件在 styles 和 scripts 块中声明。如果程序需要向已经有内容的块中添加新内容,必须使用 Jinja2 提供的 super() 函数。例如,如果要在衍生模板中添加新的 JavaScript 文件,需要这么定义 scripts 块:
{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}
3.2、使用Flask-Bootstrap集成Twitter Bootstrap的更多相关文章
- Phonegap集成angular/bootstrap/animate.css教程
1,phonegap集成angular 按照这篇文档的步骤:http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-g ...
- flask之Twitter Bootstrap
一:Twitter Bootstrap是什么? 1.开源框架:提供用户页面组件. 2.可以创建整洁且具有吸引力的网站,并且网站能兼容所有现代的Web浏览器. 特点: Bootstrap 是客户端框架, ...
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
- 推荐15款最好的 Twitter Bootstrap 开发工具
Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...
- Twitter Bootstrap深受开发者喜爱的11大理由
Bootstrap,作为创新技术框架,使开发者.设计者更容易.更快捷.更出色地完成网站及应用的搭建工作.如果你还没有使用Twitter Bootstrap,建议你去了解一下.Bootstrap为开发者 ...
- Twitter Bootstrap JavaScript插件
Twitter Bootstrap JavaScript插件本文收集了10款非常不错的JavaScript Twitter bootstrap扩展插件,利用Boostrap开发者可以节省大量的时间修复 ...
- Twitter Bootstrap
Twitter Bootstrap是一个HTML/CSS/JS框架,适用于移动设备优先的响应式网页开发.主要涉及: HTML:为已有的H5标签扩展了自定义属性 data-* CSS : Reset + ...
- 12个免费的 Twitter Bootstrap 后台模板
在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...
- Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发
Twitter Bootstrap 3.0 终于正式发布了.这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备. ...
随机推荐
- BA-WG-冷源
冷源群控系统最好由冷源厂家来做的理由 1.冷机厂家对空调的参数十分的清楚,明确的知道冷机的负荷曲线,可以优化冷机加减载的最合理时间达到最佳的节能效果 2.独立的CSM硬件模块,内置不同冷机的型号特性, ...
- 多个线程作用于同一个runnable对象
多个线程作用于同一个runnable对象 学习了:https://www.cnblogs.com/ligang305/archive/2012/08/10/2632126.html http://as ...
- [Javascript] Highlights from IO18 Javascript new features
Latest Javascript features, not supported by all broswers, but can use with babel. # try-catch-final ...
- 在windows下怎样更新vundle?
本文出自Svitter的blog 更新Vundle的时候.不管是输出BundleInstall.还是PluginInstall! 都会调用系统的git,所以必须安装git才干达到目的更新插件. git ...
- Cache 总结
这一文,让我们分析一下,<浅谈 Cache> 一文中的奇怪现象,事实上如今来看也并不奇怪了. 在什么情况下 r1 和 r2 都为 0 呢? 细致看代码,你会 ...
- Android requires compiler compliance level 5.0 or 6.0. Found '1.4' instead的解决的方法
今天在eclipse里报这个错误: Android requires compiler compliance level 5.0 or 6.0. Found '1.4' instead. Plea ...
- POJ3614 Sunscreen 贪心入门
题目大意 给出一些区间和一些点,一个点如果在一个区间内,那么此两者可以匹配.问匹配数最大是多少. 题解 这样的题我们一般都是站在区间上去找与其配对的点.我们可以得到如下性质: 对于一段区间\([l_1 ...
- [BZOJ 3363] Cow Marathon
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3363 [算法] 树的直径 [代码] #include<bits/stdc++. ...
- [HTML&CSS] 条件注释判断浏览器
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...
- JDBC基础01
今日知识 1. JDBC基本概念2. 快速入门3. 对JDBC中各个接口和类详解 JDBC: 1. 概念:Java DataBase Connectivity Java 数据库连接, Java语言操作 ...