Flask学习之十二 使用boostrap
英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xii-facelift
中文翻译地址:http://www.pythondoc.com/flask-mega-tutorial/facelift.html
开源中国社区:http://www.oschina.net/translate/the-flask-mega-tutorial-part-xii-facelift
其实这部分没什么好看的。
boostrap是前端开源框架。
在我们把 Bootstrap 添加到应用程序之前,我们必须安装 Bootstrap CSS,Javascript 以及 图片文件到我们的网页服务器可以找到的地方。
在 Flask 中,app/static 文件夹就是这些常规文件所在地。当一个 URL 中有一个 /static 后缀的话,网页服务器就知道到这个文件夹中寻找文件。
例如,如果我们存储一个名为 image.png 文件在 /app/static 中,我们能够在模板中显示带有如下标签的图片:
<img src="/static/image.png" />
我们将会根据如下结构来安装 Bootstrap 框架:
/app
/static
/css
bootstrap.min.css
bootstrap-responsive.min.css
/img
glyphicons-halflings.png
glyphicons-halflings-white.png
/js
bootstrap.min.js
根据 说明 ,我们必须在基础模板中的 head 部分加入如下内容:
<!DOCTYPE html>
<html lang="en">
<head>
...
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
...
</html>
更多的东西应该直接去看boostrap官网。
Flask学习之十二 使用boostrap的更多相关文章
- python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL
python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...
- Go语言学习笔记十二: 范围(Range)
Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...
- Tensorflow深度学习之十二:基础图像处理之二
Tensorflow深度学习之十二:基础图像处理之二 from:https://blog.csdn.net/davincil/article/details/76598474 首先放出原始图像: ...
- java jvm学习笔记十二(访问控制器的栈校验机制)
欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 本节源码:http://download.csdn.net/detail/yfqnihao/4863854 这一节,我们 ...
- Flask 教程 第十二章:日期和时间
本文翻译自The Flask Mega-Tutorial Part XII: Dates and Times 这是Flask Mega-Tutorial系列的第十二部分,我将告诉你如何以适配所有用户的 ...
- Flask 教程 第二十二章:后台作业
本文翻译自The Flask Mega-Tutorial Part XXII: Background Jobs 这是Flask Mega-Tutorial系列的第二十二部分,我将告诉你如何创建独立于W ...
- 【mongodb系统学习之十二】mongodb修改数据(一)
十二.mongodb修改数据:update 1).修改数据库数据:update:语法 db.collectionName.update({},{},boolean,boolean): 2).updat ...
- (C/C++学习笔记) 十二. 指针
十二. 指针 ● 基本概念 位系统下为4字节(8位十六进制数),在64位系统下为8字节(16位十六进制数) 进制表示的, 内存地址不占用内存空间 指针本身是一种数据类型, 它可以指向int, char ...
- javascript设计模式学习之十二——享元模式
一.享元模式的定义及使用场景 享元模式是为了解决性能问题而诞生的设计模式,这和大部分设计模式为了提高程序复用性的原因不太一样,如果系统中因为创建了大量类似对象而导致内存占用过高,享元模式就非常有用了. ...
随机推荐
- UVA11389 The Bus Driver Problem
题意:有司机,下午路线,晚上路线各n个.给每个司机恰好分配一个下午路线和晚上路线.给出行驶每条路线的时间,如果司机开车时间超过d,则要付加班费d*r.问如何分配路线才能使加班费最少. 贪心 ...
- 详解PPP模式下的产业投资基金运作【基金管理】
详解PPP模式下的产业投资基金运作[基金管理] 点击标题下「搏实资本」可快速关注 搏实资本 研究型的投资机构,实操型的专家团队 ﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌ 一.产业投资基金概述 ...
- Delphi 设计模式:《HeadFirst设计模式》Delphi7代码---装饰模式之StarBuzzCoffee[转]
1 2{<HeadFirst设计模式>之装饰模式 } 3{ 本单元中的类为被装饰者 } 4{ 编译工具: Delphi7.0 } 5{ E-Ma ...
- 读书笔记--Head First JavaScript 目录
1.交互式网络 2.存储数据 3.探索客户端 4.决策 5.循环 6.函数 7.表单与验证 8.驾驭网页 9.为数据带来生命 10.创建自定义对象 11.除错务尽 12.动态数据
- Django高级实战 开发企业级问答网站
Django高级实战 开发企业级问答网站 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的 ...
- 洛谷P1967 [NOIP2013提高组Day1T2]货车运输
P1967 货车运输 题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过 ...
- sublime3安装javascript控制台环境 方法1
Sublime Text 3 http://www.sublimetext.com/3 node.js http://nodejs.cn/download 1.安装完成后. 2.打 ...
- 使用openpyxl模块时出现错误: zipfile.BadZipFile: File is not a zip file
通过Pycharm工具新建一个xlsx文件. 再通过openpyxl模块读取该表时,报错: zipfile.BadZipFile: File is not a zip file 如下所示: 解决办法: ...
- 从0开始学习 GitHub 系列之「03.Git 速成」
前面的 GitHub 系列文章介绍过,GitHub 是基于 Git 的,所以也就意味着 Git 是基础,如果你不会 Git ,那么接下来你完全继续不下去,所以今天的教程就来说说 Git ,当然关于 G ...
- 学习JDK1.8集合源码之--Stack
1. Stack简介 Stack是集合中对数据结构栈的一种实现,栈的原则是先进先后出,与队列相反(先进先出).Stack是继承自Vector的,意味着它也是由数组实现的线程安全的,不考虑线程安全的情况 ...