Python前端框架【Bootstrap】
Bootstrap
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
创新互联网站建设公司,提供成都做网站、网站建设,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!
使用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 title %}{{title|default}}{% endblock title %}
{%- 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后,查看测试主页
网站名称:Python前端框架【Bootstrap】
本文来源:http://pwwzsj.com/article/jpeocd.html