Flask-Bootstrap集成Twitter Bootstrap

12 篇文章 0 订阅

Bootstrap是Twitter开发的一个开源的客户端框架。要想在程序中集成Bootstrap,要对模板进行改动,不过更简单的方法是使用名为Flask-Bootstrap的Flask扩展,简化集成的过程。

1.初始化Flask-Bootstrap

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

Flask-Bootstrap从flask.ext中导入,然后把程序实例传入构造方法进行初始化。

2.使用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 %}

extends指令从Flask-Bootstrap中导入bootstrap/base.html,从而实现模板继承。
block和endblock指令定义的块中的内容可添加到基模板中。
navor块使用Bootstrap组件定义了一个简单的导航条。content块中有个div容器,其中包含一个页面头部。
××Flask-Bootstrap基模板中定义的块××
doc 整个html文档
html_attribs html标签的属性
html html标签中的内容
head head标签中的内容
title title标签中的内容
metas 一组meta标签
styles 层叠样式表定义
body_atteibs body标签的属性
body body标签中的内容
navbar 用户定义的导航条
content 用户定义的页面内容
scripts 文档底部的JavaScipt声明

如果需要向已有的内容的块中添加内容,则必须使用jinjia2的super()函数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值