一: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. java 中 进程和线程的区别

    目录 什么是进程?什么是线程? 为什么要有线程? 进程与线程的区别? 进程与线程的选择取决条件? 什么是进程?什么是线程?进程:进程是并发执行程序在执行过程中资源分配和管理的基本单位(资源分配的最小单 ...

  2. rich-text 副文本组件 text文本组件

    rich-text 副文本组件 要知道我们小程序常用的标签是view 但是我们想使用div   span  h1 i 标签等等,这种带特性的标签,怎么办的,我们就可以使用我们的 rich-text组件 ...

  3. centos 6.10源码安装mysql5.5.62实验

    查看系统版本 [root@ABC ~]# cat /etc/redhat-release CentOS release 6.10 (Final) 下载mysql5.5.62源码包,解压后安装 tar ...

  4. kill的各种讯号?

    kill 程序 不仅仅只是k掉某个进程, 她还有很多作用和用途. 其实, 这也是linux的程序的一个特点: 一个程序(很多是 命令行的程序), 除了主要的作用外, 还有很多" 重要的, 有 ...

  5. mysql转化时间戳毫秒到秒

    其实我感觉都不值得写一篇随笔的,但是呢,我就是想写 其实就是截取毫秒时间戳的前十位就是我们是秒时间戳啦 update 表 set 表字段 = substr(表字段,1,10) 好简单 嫌弃中

  6. Docker报错:“WARNING: IPv4 forwarding is disabled. Networking will not work.”解决。

    问题阐述 一次停电之后,服务器停机,然后ip莫名被占用,修改新的ip之后,ssh能够连接上去,但是web服务访问不了,数据库访问不了,除了22端口,其它服务端口都不能telnet. 防火前.IPtab ...

  7. python中有哪些类型的布尔值是False?

    1.None 2. False 3.所有的值为零的数 4."" 5.[] 6.() 7.{}

  8. shell脚本中执行python脚本并接收其返回值的例子

    1.在shell脚本执行python脚本时,需要通过python脚本的返回值来判断后面程序要执行的命令 例:有两个py程序  hello.py 复制代码代码如下: def main():    pri ...

  9. ES6标准入门 第二章:块级作用域 以及 let和const命令

    一.块级作用域 1.为什么需要块级作用域? ES5中只有全局作用域和函数作用域,带来很多不合理的场景. (1)内层变量可能会覆盖外层变量: var tem = new Date(); function ...

  10. 内网渗透 - 提权 - Windows

    MS提权 MS16- MS16- 提权框架 Sherlock 信息收集 ifconfig -a cat /etc/hosts arp -a route -n cat /proc/net/* ping扫 ...