一: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的更多相关文章

  1. 实验4、Flask基于Blueprint & Bootstrap布局的应用服务

    1. 实验内容 模块化工程内容能够更好的与项目组内成员合作,Flask Blueprint提供了重要的模块化功能,使得开发过程更加清晰便利.此外,Flask也支持Bootstrap的使用. 2. 实验 ...

  2. 推荐13款优秀的Twitter Bootstrap JavaScript插件

    Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...

  3. Twitter Bootstrap

    Twitter Bootstrap是一个HTML/CSS/JS框架,适用于移动设备优先的响应式网页开发.主要涉及: HTML:为已有的H5标签扩展了自定义属性 data-* CSS : Reset + ...

  4. 12个免费的 Twitter Bootstrap 后台模板

    在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...

  5. 推荐15款最好的 Twitter Bootstrap 开发工具

    Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...

  6. Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发

    Twitter Bootstrap 3.0 终于正式发布了.这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备. ...

  7. 11款扁平化设计的 Twitter Bootstrap 主题和模板

    扁平化设计和 Bootstrap 框架是2013年网页设计领域的两大设计潮流.把这两者集合起来不是件容易的事情,使用下面这些主题和模板将节省我们的开发时间,因为我们可以修改已有的基础代码,而不是从零开 ...

  8. Twitter Bootstrap深受开发者喜爱的11大理由

    Bootstrap,作为创新技术框架,使开发者.设计者更容易.更快捷.更出色地完成网站及应用的搭建工作.如果你还没有使用Twitter Bootstrap,建议你去了解一下.Bootstrap为开发者 ...

  9. 免费下载!Twitter Bootstrap V3 矢量界面素材

    Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...

随机推荐

  1. 尚硅谷Docker---1-5、docker简介

    尚硅谷Docker---1-5.docker简介 一.总结 一句话总结: docker是环境打包:有点像windows镜像 docker的实质:缩小版.精细版.高度浓缩版的一个小型的linux系统 1 ...

  2. qbzt day3 下午(好难)

    内容提要 有关数据结构的例题 求逆序对数 统计每个数前面有多少比他大的数 开数组表示这个数之前0~9这些数出现了几次 动态将某个点加一,动态求前缀和 用树状数组 如果数太大了怎么办? 离散化 步骤:先 ...

  3. Ehrenfeucht–Fraïssé game back-and-forth games

    w https://en.wikipedia.org/wiki/Ehrenfeucht–Fraïssé game

  4. LinkedTransferQueue 源码分析

    LinkedTransferQueue LinkedTransferQueue 能解决什么问题?什么时候使用 LinkedTransferQueue? 1)LinkedTransferQueue 是基 ...

  5. 用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置

    state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...

  6. MyBatis系列:一、入门

    MyBatis无需我介绍,本系列文章是纯干货,没有一点废话. 1.创建一个maven项目,引入mysql的驱动和mybatis的maven引用 <dependency> <group ...

  7. VMware 虚拟化编程(8) — 多线程中的 VixDiskLib

    目录 目录 前文列表 多线程注意事项 多线程中的 VixDiskLib 前文列表 VMware 虚拟化编程(1) - VMDK/VDDK/VixDiskLib/VADP 概念简析 VMware 虚拟化 ...

  8. BIN转换成HEX格式及HEX转换成BIN的两个函数接口

    unsigned char HEX2BYTE(unsigned char hex_ch) { ') { '; } if (hex_ch >= 'a' && hex_ch < ...

  9. C# datatable 导出到Excel

    datatable导出到Excel /// <summary> /// 将DataTable导出为Excel文件(.xls) /// </summary> /// <pa ...

  10. 【ABAP系列】SAP ABAP 利用class创建客户/供应商主数据

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP 利用class创建 ...