一: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. shell中的=~的简单用法

    其中 ~ 其实是对后面的正则表达式表示匹配的意思,如果匹配就输出1, 不匹配就输出0 [[ $test =~ ^[0-9]+ ]] && echo 1 || echo 0

  2. ThreadLocal在Spring事务管理中的应用

    ThreadLocal是用来处理多线程并发问题的一种解决方案.ThreadLocal是的作用是提供线程的局部变量,在多线程并发环境下,提供了与其他线程隔离的局部变量.通常这样的设计的情况是因为这个局部 ...

  3. CMAK找不到相关编译器的问题

    本机安装了vs2019,在编译vulkansdk所带的samples时,遇到 错误提示: CMake Error at CMakeLists.txt: (project): Generator Vis ...

  4. IIS知识点总结

    一.命令行启动IIS Express 转自:https://www.cnblogs.com/cby-love/p/7102847.html 我们在调试WEB程序的时候可以把本地web程序挂载到本地II ...

  5. CMakeLists.txt 语法

    命令不区分大小写(参数区分大小写) add_executable(demo main.cpp main.h main.rc) 用main.cpp源文件,main.h文件,main.rc文件构造可执行文 ...

  6. EnumMap 源码分析

    EnumMap EnumMap 能解决什么问题?什么时候使用 EnumMap? 1)EnumMap[枚举映射]中的键值必须来自单个枚举. 2)EnumMap 根据枚举键的自然顺序来维护,迭代遍历是有序 ...

  7. python实现建立tcp通信

    实现代码如下: #tcp协议通信import socketclass TcpConnect: def get_tcp(self,ip,port,message): #实例化一个基于tcp的socket ...

  8. python中的包和文件夹的区别

    python的模块,就不得不说包(package),package是module的集合,在一个package中有很多的module, 还是以之前的index.py与baiduHq.py模块为案例,说明 ...

  9. mysql 函数 时间函数,数学函数,字符串函数,条件判断函数

    =========================================== mysql 相关函数 ============================================= ...

  10. [Vim 填坑] 01 Vim 中替换与注释的补充

    目录 1. print( 坑的信息 ) 2. 开始填坑 (1) :n1,n2s/old/new/gc 的后续命令 ^E ^Y (2) 利用"V-可视"模式进行多行注释 1. pri ...