flask-bootstrap使用 - 结合flask-nav和bootstrapcdn

在使用flask进行web开发时，前端界面也是非常重要的一环，使用flask-bootstrap可以轻松获取漂亮的样式

本文介绍flask-bootstrap在实际使用中的两个小技巧

1. flask-nav

可以直接通过操作对象的方式生成导航栏

如何使用 (部分代码)

• 1.1 首先需要在.py文件中定义并注册

from flask-bootstrap import Bootstrap
from flask_nav  import Nav
from flask_nav.elements import *

app  = Flask(__name__)
Bootstrap(app)
nav = Nav()
...
# 定义导航栏
nav.reister_element('top',Navbar(u'Flask入门',
View(u'主页','index'),
View(u'关于','index'),
View(u'服务','index'),
))
# 注册到app上
nav.init_app(app)

• 1.2 然后在html中增加：

{% block navbar %}
    {{ nav.top.render() }}
{% endblock %}

2. Bootstrap CDN

因为直接使用bootstrap是没有主样式的，可以直接使用这些主题

地址：https://www.bootstrapcdn.com/bootswatch

使用
- 2.1 先在官网选择喜欢的主题，并复制css地址
- 2.2 在html中添加如下代码（修改你的href）

{% block styles %}
    {{ super() }}
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cerulean/bootstrap.min.css">
{% endblock %}