flask-bootstrap使用

来源：互联网发布：win10怎么连接有线网络编辑：程序博客网时间：2024/05/18 22:14

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

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

1. flask-nav

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

如何使用 (部分代码)

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

from flask-bootstrap import Bootstrapfrom flask_nav  import Navfrom 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 %}

阅读全文

1 0