一、Bootstrap
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。
Python中，同样可以使用Bootstrap。
1. 导入Bootstrap库
from flask_bootstrap import Bootstrap
2. 实例化
Bootstrap(app)
Samply.py
# coding:utf-8
from flask import Flask,render_template,request,url_for
from flask_bootstrap import Bootstrap app = Flask(__name__)
Bootstrap(app) @app.route('/')
def home():
return render_template('home.html',title_name = 'welcome') @app.route('/service')
def service():
return 'service' @app.route('/about')
def about():
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 %}
<div class="page-header">
<div class="container">
<h1>{{ self.title() }}</h1>
</div>
</div>
<div class="container">
{{ ui.input('username') }}
{{ ui.input('password',type='password') }}
</div>
{% endblock content %}
{% block head %}
{{ super() }}
{% include 'includes/_head.html' %}
{% endblock %}
这时候我们看一下，运行出来是什么样子
------------------------------------------------------------------------------------------------
基本的内容有了，如果我们想要加上一个标题栏
可以使用Flask-Nav扩展，如何使用呢？
1. 导入库
from flask_nav import Nav
from 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 （地址）的CSS样式表，只要把地址填入href中就可以
不改变原head的情况下，又增加css样式表
{% block styles %}
{{ super() }}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
{% endblock %}
这时候我们看一下，运行出来是什么样子
-------------------------------完成@@-----------------------------------
参考文档：
1. Bootstrap中文网
2. Flask-Nav 文档
附录：
Sample.py
# coding:utf-8
from flask import Flask,render_template,request,url_for
from flask_bootstrap import Bootstrap
from flask_nav import Nav
from 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('/')
def home():
return render_template('home.html',title_name = 'welcome') @app.route('/service')
def service():
return 'service' @app.route('/about')
def about():
return 'about' @app.template_test('current_link')
def is_current_link(link):
return link == request.path if __name__ == '__main__':
app.run(debug=True)
home.html
{% extends 'bootstrap/base.html' %}
{% import '_macro.html' as ui %}
{% block title %}{{ title_name }}{% endblock %}
{% block content %}
<div class="page-header">
<div class="container">
<h1>{{ self.title() }}</h1>
</div>
</div>
<div class="container">
{{ ui.input('username') }}
{{ ui.input('password',type='password') }}
</div>
{% endblock content %}
{% block head %}
{{ super() }}
{% include 'includes/_head.html' %}
{% endblock %}
{% block styles %}
{{ super() }}
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
{% endblock %}
{% block navbar %}
{{ nav.top.render() }}
{% endblock %}
_macro.html
{# 定义宏 #}
{% macro input(name,value='',type='text',size=20) %}
<input type="{{ type }}"
name="{{ name }}"
value="{{ value }}"
size="{{ size }}"/>
{% endmacro %}