|
Python 前端框架【Bootstrap】
原创
流域哈哈
2019-03-08 22:28:01
博主文章分类：Python基础学习
©著作权
文章标签
python
flask
bootstrap
flask_bootstrap
文章分类
Python
后端开发
©著作权归作者所有：来自51CTO博客作者流域哈哈的原创作品，请联系作者获取转载授权，否则将追究法律责任
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 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 %}
Toggle navigation
测试页面
Link (current)
Link
Dropdown
Action
Another action
Something else here
Separated link
One more separated link
Link
Dropdown
Action
Another action
Something else here
Separated link
{% endblock %}
测试主页继承自基模板
{% extends 'base.html' %}
{% block title %}
主页
{% endblock %}
{% block content %}
欢迎来到测试主页
{% endblock %}
运行flask后，查看测试主页
赞
收藏
评论
分享
举报
上一篇：Python Web框架学习【Flask】
下一篇：Python 基于Flask的Web开发【1】【用户登录 注册】
|