flask之Twitter Bootstrap
一:Twitter Bootstrap是什么?
1.开源框架:提供用户页面组件。
2.可以创建整洁且具有吸引力的网站,并且网站能兼容所有现代的Web浏览器。
特点:
Bootstrap 是客户端框架,因此不会直接涉及服务器。服务器需要做的只是提供引用了Bootstrap 层叠样式表(CSS) 和JavaScript 文件的HTML 响应, 并在HTML、CSS 和JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模板。要想在程序中集成Bootstrap,显然要对模板做所有必要的改动。不过,更简单的方法是使用一个名为Flask-Bootstrap 的Flask 扩展,简化集成的过程。
二:使用
(venv) $ pip install flask-bootstrap
Successfully installed dominate-2.4.0 flask-bootstrap-3.3.7.1 visitor-0.1.3
flask-bootstrap扩展都需要在创建实例时,进行初始化
# bootstrap.html {% extends "bootstrap/base.html" %} {% block title %} bootstrap {% endblock %} {% block navbar %} <h1>这是继承模板的 navbar:作用是显示导航页面 </h1> {% endblock %} {% block content %} <h1> 这是继承模板的 content:作用是显示内容 </h1> {% endblock %}
from flask import Flask
from flask import render_template
from flask.ext.bootstrap import Bootstrap app = Flask(__name__)
bootstrap = Bootstrap(app) @app.route("/")
def index():
return "这是主页" @app.route("/bootstrap")
def bootstrap_test():
return render_template("bootstrap.html") if __name__ == '__main__':
app.run(debug=True)
具体使用方法见:https://v3.bootcss.com/components/#navbar
flask之Twitter Bootstrap的更多相关文章
- 实验4、Flask基于Blueprint & Bootstrap布局的应用服务
1. 实验内容 模块化工程内容能够更好的与项目组内成员合作,Flask Blueprint提供了重要的模块化功能,使得开发过程更加清晰便利.此外,Flask也支持Bootstrap的使用. 2. 实验 ...
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
- Twitter Bootstrap
Twitter Bootstrap是一个HTML/CSS/JS框架,适用于移动设备优先的响应式网页开发.主要涉及: HTML:为已有的H5标签扩展了自定义属性 data-* CSS : Reset + ...
- 12个免费的 Twitter Bootstrap 后台模板
在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...
- 推荐15款最好的 Twitter Bootstrap 开发工具
Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...
- Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发
Twitter Bootstrap 3.0 终于正式发布了.这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备. ...
- 11款扁平化设计的 Twitter Bootstrap 主题和模板
扁平化设计和 Bootstrap 框架是2013年网页设计领域的两大设计潮流.把这两者集合起来不是件容易的事情,使用下面这些主题和模板将节省我们的开发时间,因为我们可以修改已有的基础代码,而不是从零开 ...
- Twitter Bootstrap深受开发者喜爱的11大理由
Bootstrap,作为创新技术框架,使开发者.设计者更容易.更快捷.更出色地完成网站及应用的搭建工作.如果你还没有使用Twitter Bootstrap,建议你去了解一下.Bootstrap为开发者 ...
- 免费下载!Twitter Bootstrap V3 矢量界面素材
Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...
随机推荐
- 尚硅谷Docker---1-5、docker简介
尚硅谷Docker---1-5.docker简介 一.总结 一句话总结: docker是环境打包:有点像windows镜像 docker的实质:缩小版.精细版.高度浓缩版的一个小型的linux系统 1 ...
- qbzt day3 下午(好难)
内容提要 有关数据结构的例题 求逆序对数 统计每个数前面有多少比他大的数 开数组表示这个数之前0~9这些数出现了几次 动态将某个点加一,动态求前缀和 用树状数组 如果数太大了怎么办? 离散化 步骤:先 ...
- Ehrenfeucht–Fraïssé game back-and-forth games
w https://en.wikipedia.org/wiki/Ehrenfeucht–Fraïssé game
- LinkedTransferQueue 源码分析
LinkedTransferQueue LinkedTransferQueue 能解决什么问题?什么时候使用 LinkedTransferQueue? 1)LinkedTransferQueue 是基 ...
- 用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置
state:所有组件的所有状态和数据 放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...
- MyBatis系列:一、入门
MyBatis无需我介绍,本系列文章是纯干货,没有一点废话. 1.创建一个maven项目,引入mysql的驱动和mybatis的maven引用 <dependency> <group ...
- VMware 虚拟化编程(8) — 多线程中的 VixDiskLib
目录 目录 前文列表 多线程注意事项 多线程中的 VixDiskLib 前文列表 VMware 虚拟化编程(1) - VMDK/VDDK/VixDiskLib/VADP 概念简析 VMware 虚拟化 ...
- BIN转换成HEX格式及HEX转换成BIN的两个函数接口
unsigned char HEX2BYTE(unsigned char hex_ch) { ') { '; } if (hex_ch >= 'a' && hex_ch < ...
- C# datatable 导出到Excel
datatable导出到Excel /// <summary> /// 将DataTable导出为Excel文件(.xls) /// </summary> /// <pa ...
- 【ABAP系列】SAP ABAP 利用class创建客户/供应商主数据
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP 利用class创建 ...