二话不说，上来先安装一下
pip install flask_bootstrap
既然是扩展模板那就要分两部分说明
1、 程序导入
exts.init.py 这个是我自定义的扩展目录下的初始化文件里边进行初始化导入
from flask_bootstrap import Bootstrap
bootstrap=Bootstrap()
然后，就可以在工厂函数里边进行注册了 我的位置是app.init.py
from exps import bootstrap
bootstrap.init_app(app=app)
至此，起码来说程序里边是有这个玩意了。
2. 模板部分
要参考两个网站
一个是中文组件部分这里负责资源和组件以及Cdn的相关内容：总之不工作或者不好看就找这个地方，他是bootstrap的介绍
https://v3.bootcss.com/
另一个是：flask-bootstrap的文档，他是和语言更接近的介绍。
https://flask-bootstrap-zh.readthedocs.io/zh/latest/
然后，建立父模板也就base.html
{% extends "bootstrap/base.html" %} //首先先继承，很重要
{% block title %}首页{% endblock %} //挖坑挖坑
{% block styles %} //样式挖坑
{{ super() }} //继承后再添加
<style>
</style>
{% endblock %}
{% block navbar %} //导航条，去网站上找一找，选个好看的，注意手机端多测试有的屏幕比较小就不显示
{% endblock %}
{% block content %}
{% block newcontent %}
{% endblock %}
{% block footer %}
{% endblock %}
{% endblock %}
反正这个模板就是不停的调整好不好看，不停地把参数填进去看样子的一个工作，逻辑不严禁怎么都会干一部分活。
在页面头部我们继承了一个{% extends "bootstrap/base.html" %}，下面我贴出这个被继承的代码在下面帮助理解和备查。
{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
<head>
{%- block head %}
<title>{% block title %}{{title|default}}{% endblock title %}</title>
{%- block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- endblock metas %}
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
</head>
<body{% block body_attribs %}{% endblock body_attribs %}>
{% block body -%}
{% block navbar %}
{%- endblock navbar %}
{% block content -%}
{%- endblock content %}
{% block scripts %}
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{%- endblock scripts %}
{%- endblock body %}
</body>
{%- endblock html %}
</html>
{% endblock doc -%}
可见，我们既然继承这个模板，那么填坑的时候也只能填这里边挖好的坑而不能自己发挥随意乱填的。
|