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
可用的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. |