Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏
2017-05-05 15:26
676 查看
一、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 %}
这时候我们看一下,运行出来是什么样子
![](https://images2015.cnblogs.com/blog/1147362/201705/1147362-20170505150908164-1294952006.png)
------------------------------------------------------------------------------------------------
基本的内容有了,如果我们想要加上一个标题栏
可以使用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 %}
这时候我们看一下,运行出来是什么样子
![](https://images2015.cnblogs.com/blog/1147362/201705/1147362-20170505151806679-1535910500.png)
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 %}
这时候我们看一下,运行出来是什么样子
![](https://images2015.cnblogs.com/blog/1147362/201705/1147362-20170505152234539-272628281.png)
-------------------------------完成@@-----------------------------------
参考文档:1. Bootstrap中文网
2. Flask-Nav 文档
3. W3C Bootstrap教程
4. BootstrapCDN页面
附录:
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 %}
相关文章推荐
- JAVAWEB开发之Struts2详解(一)——Struts2框架介绍与快速入门、流程分析与工具配置以及Struts2的配置以及Action和Result的详细使用
- Flask从入门到精通之Flask-Bootstrap的使用
- SVN使用【介绍SVN、快速入门、解决冲突】
- bootstrap学习使用——快速入门
- linux系统学习:基础篇(系统介绍以及命令行的使用)快速入门linux系统
- Hibernate使用快速入门介绍(2)
- flask-bootstrap使用 - 结合flask-nav和bootstrapcdn
- python html parser库lxml的介绍和使用(快速入门)
- 网站前端_EasyUI.基础入门.0001.jQuery EasyUI简单介绍与快速使用?
- JAXB的使用(快速入门)
- GWT入门介绍(使用JSON格式的数据通讯)
- 使用java操作Excel入门 ---- jxl介绍
- Linux快速入门之Linux常用命令介绍
- Toad 使用快速入门
- PHP快速入门教程:WHILE循环的使用示例
- HTML快速入门7——URL详解、图片使用
- Microsoft ASP.NET 快速入门教程的大纲介绍(一个值得推荐的.net网站也可以说是.net资料库)
- 在Linux下使用STL快速入门
- GWT入门介绍(使用JSON格式的数据通讯)
- ASP.NET2.0快速入门--使用母版页创建布局