Bootstrap是Twitter 开发的一个开源框架,可以创建简洁有吸引力的网页。简单测试一下
安装:
pip install flask-bootstrap
注:需要提前在程序运行目录下创建templates文件夹,另外新建user.html
文件结构图:
test.py,页面处理
from flask import Flask, render_template
app=Flask(__name__)
# ...
@app.route('/')
def index():
return render_template('index.html')
@app.route('/user/<name>')
def user(name):
return render_template('user.html', name=name)
test1.py,引入框架
from flask_bootstrap import Bootstrap
from test import app
bootstrap = Bootstrap(app)
#运行
app.run()
user.html,页面
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Hello, {{ name }}!</h1>
</div>
</div>
{% endblock %}
运行test1py,然后浏览器访问http://localhost:5000/user/python
运行图: