Bootstrap是Twitter推出的一个用于前端开发的开源工具包。而Flask-Bootstrap就是利用了Bootstrap来编写了一个Jinja2的模版，通过extends include block基于这个模版来替换成你自己的内容；
注册到Flask中
from flask import Flask
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
或
from flask import Flask
from flask_bootstrap import Bootstrap
def create_app():
app = Flask(__name__)
Bootstrap(app)
return app
简单的模版
{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}
{% block navbar %}
<div class="navbar navbar-fixed-top">
<!-- ... -->
</div>
{% endblock %}
{% block content %}
<h1>Hello, Bootstrap</h1>
{% endblock %}
ps: 若在pycharm IDE中extends bootstrap not found时，请将templates文件夹 Make directory as --> template
WX20170916-232449@2x.png
可用的block
| Block name | Outer Block | Outer Block |
|---|---|---|
| doc | Outermost block. | |
| html | doc | Contains the complete content of the <html> tag. |
| html_attribs | doc | Attributes for the HTML tag. |
| head | doc | Contains the complete content of the <head> tag. |
| body | doc | Contains the complete content of the <body> tag. |
| body_attribs | body | Attributes for the Body Tag. |
| title | head | Contains the complete content of the <title> tag. |
| styles | head | Contains the complete content of the <title> tag. |
| metas | head | Contains all <meta> tags inside head. |
| navbar | body | An empty block directly above content. |
| content | body | Convenience block inside the body. Put stuff here. |
| scripts | body | Contains all <script> tags at the end of the body. |
网友评论