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 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...
随机推荐
- vue中动态加载图片路径的方法
assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.p ...
- postgresql中实现oracle SYS_CONNECT_BY_PATH
oracle: select sys_connect_by_path(t2.ID, '/') as PATH, t1.id from HTD_DEVICETYPE_RELATI ...
- 词频分析 评论标签 nltp APP-分析买家评论的评分-高频词:二维关系
0-定评论结果:好评.差评,1星.4星,二元化为“积极.消极”,取一元的数据为样本 1-得到词频结果:如手机类的“积极样本”得到前10的高频词:运行(run running ran).内存(memor ...
- All strings must be XML compatible: Unicode or ASCII, no NULL bytes or control characters
ValueError: All strings must be XML compatible: Unicode or ASCII, no NULL bytes or control character ...
- UI自动化之特殊处理四(获取元素属性\爬取页面源码\常用断言)
获取元素属性\爬取页面源码\常用断言,最终目的都是为了验证我们实际结果是否等于预期结果 目录 1.获取元素属性 2.爬取页面源码 3.常用断言 1.获取元素属性 获取title:driver.titl ...
- 《计算机程式设计》Week5 课堂笔记
本笔记记录自 Coursera课程 <计算机程式设计> 台湾大学 刘邦锋老师 Week5 Pointer 5-1 Pointer Definition and Declaration 指针 ...
- GMS测试常用命令CTS>S&VTS
本文档介绍一下cts,gts,sts,vts,cts-on-gsi等测试的常用命令,基于Android9. [附件]Google官网的命令网页. 常用通用命令参数: 列出历史测试结果:l r 指定设备 ...
- Spring004--Spring AOP(mooc)
一.Spring AOP概览 1.1.AOP(面向切面编程)是什么 1. AOP是一种编程范式,而不是编程语言. 2.解决特写问题,不能解决所有问题 3.是OOP的补充,不是替代 除了面向切面编程,还 ...
- 前端项目中使用jsencrypt进行字段加密
前端项目中使用jsencrypt进行字段加密. 使用步骤:①获取公钥②实例化对象③设置公钥④将所需数据进行加密然后返回. 进行一个简单的封装如下 /** * npm install jsencrypt ...
- [Python3 填坑] 009 深拷贝与浅拷贝
目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 Python3.7 官方文档 2.2 赋值.切片与 copy() 分析 分析 分析 分析 2.3 copy 模块 分析 分析 2.4 小 ...