3. Twitter的客户端框架——Bootstrap

来源：互联网发布：百度网盘端口编辑：程序博客网时间：2024/05/28 15:07

虚拟环境下，输入pip install flask-bootstrap安装Bootstrap扩展。

在程序开始处初始化扩展：

from flask.ext.bootstrap import Bootstrap#...bootstrap = Bootstrap(app)      # 创建示例并初始化

例题是将之前的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="/">Flasky</a>        </div>        <div class="navbar-collapse collapse">            <ul class="nav navbar-nav">                <li><a href="/">Home</a></li>                <li><a href="/">Work</a></li> # 这一行是我后加的            </ul>        </div>          </div></div>{% endblock %}{% block content %}<div class="container">    <div class="page-header">        <h1>Hello, {{ name }}!</h1>    </div></div>{% endblock %}

保存后在Git中把服务器跑起来，在浏览器中输入地址，发现页面高大尚了许多：（是的，我把代码当儿子）
这里写图片描述
这也就是验证一下别人的正确做法过个瘾，没什么技术含量。不过提到了Bootstrap的官方文档（http://getbootstrap.com）是很好的学习资源，顺便记下，说不定以后用得着。

Flask-Bootstrap基模板中定义的块：（暂时还很陌生，先敲一遍留点印象）
doc 整个HTML文档
html_attribs 标签的属性
html 标签中的内容
head 标签中的内容
title 标签中的内容
metas 一组标签
styles 层叠样式表定义
body_attribs 标签的属性
body 标签中的内容
navbar 用户定义的导航条
content 用户定义的页面内容
scripts 文档底部的JavaScript声明

对这一块目前的理解是，这些模块定义在基模板中，在衍生模板中详细写块的内容：

{% block block_name %}{{ super() }}  # 如果所调用的块在基模板中是有内容的，需要加上这一行，来保留基模板中的内容     <html details>{% endblock %}

然后页面上会把这些块中的内容显示在基模板定义的相关位置。

1 0