Flask-Bootstrap
安装
**pip install flask-bootstrap
**
加载
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap()
初始化
- 方法一 :
app = Flask(__name__)
Bootstrp(app)
- 方法二 :
页面加入:{ %extends "bootstrap/base.html" %}
内置的block
{% block title %} {% endblock %}
: 标题{% block navbar%} {% endblock %}
: 导航栏{% block content %} {% endblock %}
: 内容{% block styles %} {% endblock %}
: 样式{% block scripts %} {% endblock %}
: 脚本{% block head %} {% endblock %}
: 头{% block body %} {% endblock %}
: 体{% block footer %} {% endblock %}
: 底部
自定义添加块
- 把新的块在 content块里面重新声明一下,相当于在原有的content里面添加了一个块
url_prefix
- 在路径前面添加前缀 :
user_bp = Blueprint('user', __name__, url_prefix='/user')
- 使用前的请求 :
http://127.0.0.1:5000/index
- 使用后 :
http://127.0.0.1:5000/user/index
报错
jinjia2.exceptions.UndefinedError: 'bootstrap_find_resource' is undefined
- 原因 :flask-bootstrap 和 bootstrap-flask 不能同时使用
父模板
base.html
{# 继承bootstrap的base文件 #}
{% extends "bootstrap/base.html" %}
{% block title %}首页{% endblock %}
{% block styles %}
{{ super() }}
<style>
#myfoot {
border-top: 1px solid darkgray;
font-size: 14px;
text-align: center;
color: lightgray;
}
</style>
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">个人博客</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
<li><a href="#">关于作者</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">留言板</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">文章分类 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">分类1</a></li>
<li><a href="#">分类2</a></li>
<li><a href="#">分类3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">分类4</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">分类5</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="{{ url_for('user.register') }}">注册</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% endblock %}
{% block content %}
{% block newcontent %}
<h1>Hello, Bootstrap</h1>
{% endblock %}
{% block footer %}
<p id="myfoot">这是底部</p>
{% endblock %}
{% endblock %}