Bootstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

使用bootstrap组件构建页面元素

获取css源
在官网中选择版本后进入如下界面

选择下载源码进行本地导入，或者在联网状态下导入网络位置的css

在html中导入bootstrap.css

在网络上选择需要选用的组件，这里以按钮为例

复制代码粘贴至html中，并根据需求修改内容

在浏览器中查看

在flask中使用bootstrap(flask_bootstrap)

flask_bootstrap可以使我们快速在flask框架中使用bootstrap来构建我们的页面

安装

在对应的环境中使用pip 安装
pip install flask_bootstrap

使用

在flask工程中主程序app.py中添加代码如下：

from flask_bootstrap import Bootstrap
app = Flask(__name__)
Bootstrap(app)

templates中的html文件可以直接导入flask_bootstrap中的基模板

可以在flask_bootstrap包中的templates/bootstrap/base.html查看基模板

{% block doc -%}


{%- block html %}
  
    {%- block head %}
    

    {%- block metas %}
    
    {%- endblock metas %}

    {%- block styles %}
    
    
    {%- endblock styles %}
    {%- endblock head %}
  
  
    {% block body -%}
    {% block navbar %}
    {%- endblock navbar %}
    {% block content -%}
    {%- endblock content %}

    {% block scripts %}
    
    
    {%- endblock scripts %}
    {%- endblock body %}
  
{%- endblock html %}

{% endblock doc -%}

基模板中完成了bootstrap的css和js导入
继承后直接添加bootstrap中的元素即可实现

继承bootstrap的基模板后构建自己的基模板，以添加一个导航栏为例

{% extends 'bootstrap/base.html' %}

{% block navbar %}
    

{% endblock %}

测试主页继承自基模板

{% extends 'base.html' %}
{% block title %}
    主页
{% endblock %}
{% block content %}
    

        
欢迎来到测试主页
    
{% endblock %}

运行flask后，查看测试主页