一: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. vue中动态加载图片路径的方法

    assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.p ...

  2. postgresql中实现oracle SYS_CONNECT_BY_PATH

    oracle: select sys_connect_by_path(t2.ID, '/') as PATH, t1.id             from HTD_DEVICETYPE_RELATI ...

  3. 词频分析 评论标签 nltp APP-分析买家评论的评分-高频词:二维关系

    0-定评论结果:好评.差评,1星.4星,二元化为“积极.消极”,取一元的数据为样本 1-得到词频结果:如手机类的“积极样本”得到前10的高频词:运行(run running ran).内存(memor ...

  4. 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 ...

  5. UI自动化之特殊处理四(获取元素属性\爬取页面源码\常用断言)

    获取元素属性\爬取页面源码\常用断言,最终目的都是为了验证我们实际结果是否等于预期结果 目录 1.获取元素属性 2.爬取页面源码 3.常用断言 1.获取元素属性 获取title:driver.titl ...

  6. 《计算机程式设计》Week5 课堂笔记

    本笔记记录自 Coursera课程 <计算机程式设计> 台湾大学 刘邦锋老师 Week5 Pointer 5-1 Pointer Definition and Declaration 指针 ...

  7. GMS测试常用命令CTS&GTS&VTS

    本文档介绍一下cts,gts,sts,vts,cts-on-gsi等测试的常用命令,基于Android9. [附件]Google官网的命令网页. 常用通用命令参数: 列出历史测试结果:l r 指定设备 ...

  8. Spring004--Spring AOP(mooc)

    一.Spring AOP概览 1.1.AOP(面向切面编程)是什么 1. AOP是一种编程范式,而不是编程语言. 2.解决特写问题,不能解决所有问题 3.是OOP的补充,不是替代 除了面向切面编程,还 ...

  9. 前端项目中使用jsencrypt进行字段加密

    前端项目中使用jsencrypt进行字段加密. 使用步骤:①获取公钥②实例化对象③设置公钥④将所需数据进行加密然后返回. 进行一个简单的封装如下 /** * npm install jsencrypt ...

  10. [Python3 填坑] 009 深拷贝与浅拷贝

    目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 Python3.7 官方文档 2.2 赋值.切片与 copy() 分析 分析 分析 分析 2.3 copy 模块 分析 分析 2.4 小 ...