Flask-Bootstrap

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.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容