python dash flask 导航栏_Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏

一、Bootstrap

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。

Python中，同样可以使用Bootstrap。

1. 导入Bootstrap库

from flask_bootstrap import Bootstrap

2. 实例化

Bootstrap(app)

Samply.py

#coding:utf-8

from flask importFlask,render_template,request,url_forfrom flask_bootstrap importBootstrap

app= Flask(__name__)

Bootstrap(app)

@app.route('/')defhome():return render_template('home.html',title_name = 'welcome')

@app.route('/service')defservice():return 'service'@app.route('/about')defabout():return 'about'

if __name__ == '__main__':

app.run(debug=True)

3. 定义块内容

home.html

{% extends 'bootstrap/base.html' %} #声明继承

{% import '_macro.html' as ui %}

{% block title %}{{ title_name }}{% endblock %}

{% block content %}

{{ self.title() }}

{{ ui.input('username') }}

{{ ui.input('password',type='password') }}

{% endblock content %}

{% block head %}

{{ super() }}

{% include 'includes/_head.html' %}

{% endblock %}

这时候我们看一下，运行出来是什么样子

------------------------------------------------------------------------------------------------

基本的内容有了，如果我们想要加上一个标题栏

可以使用Flask-Nav扩展，如何使用呢？

1. 导入库

from flask_nav importNavfrom flask_nav.elements import *

2. 实例化并注册一个导航栏

nav=Nav()

nav.register_element('top',Navbar(u'Flask入门',

View(u'主页','home'),

View(u'关于','about'),

Subgroup(u'项目',

View(u'项目一','about'),

Separator(),

View(u'项目二', 'service'),

),

))

3. 初始化这个实例

nav.init_app(app)

以上这些都是在Samply.py文件里

4. 渲染并定义成块，home.html

{% block navbar %}

{{ nav.top.render() }}

{% endblock %}

这时候我们看一下，运行出来是什么样子

5. 增加样式表

这个时候我们发现配色太单调了，这时候我们可以引用 BootstrapCDN (

不改变原head的情况下，又增加css样式表

{% block styles %}

{{ super() }}{% endblock %}

这时候我们看一下，运行出来是什么样子

-------------------------------完成@@-----------------------------------

参考文档：

附录：

Sample.py

#coding:utf-8

from flask importFlask,render_template,request,url_forfrom flask_bootstrap importBootstrapfrom flask_nav importNavfrom flask_nav.elements import *app= Flask(__name__)

Bootstrap(app)

nav=Nav()

nav.register_element('top',Navbar(u'Flask入门',

View(u'主页','home'),

View(u'关于','about'),

Subgroup(u'项目',

View(u'项目一','about'),

Separator(),

View(u'项目二', 'service'),

),

))

nav.init_app(app)

@app.route('/')defhome():return render_template('home.html',title_name = 'welcome')

@app.route('/service')defservice():return 'service'@app.route('/about')defabout():return 'about'@app.template_test('current_link')defis_current_link(link):return link ==request.pathif __name__ == '__main__':

app.run(debug=True)

home.html

{% extends 'bootstrap/base.html' %}

{% import '_macro.html' as ui %}

{% block title %}{{ title_name }}{% endblock %}

{% block content %}

{{ self.title() }}

{{ ui.input('username') }}

{{ ui.input('password',type='password') }}

{% endblock content %}

{% block head %}

{{ super() }}

{% include 'includes/_head.html' %}

{% endblock %}

{% block styles %}

{{ super() }}{% endblock %}

{% block navbar %}

{{ nav.top.render() }}

{% endblock %}

_macro.html

{# 定义宏 #}

{% macro input(name,value='',type='text',size=20) %}{% endmacro %}