英文博客地址：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的更多相关文章

  1. python3.4学习笔记(十二) python正则表达式的使用，使用pyspider匹配输出带.html结尾的URL

    python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...

  2. Go语言学习笔记十二： 范围(Range)

    Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...

  3. Tensorflow深度学习之十二：基础图像处理之二

    Tensorflow深度学习之十二:基础图像处理之二 from:https://blog.csdn.net/davincil/article/details/76598474   首先放出原始图像: ...

  4. java jvm学习笔记十二（访问控制器的栈校验机制）

    欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 本节源码:http://download.csdn.net/detail/yfqnihao/4863854 这一节,我们 ...

  5. Flask 教程 第十二章：日期和时间

    本文翻译自The Flask Mega-Tutorial Part XII: Dates and Times 这是Flask Mega-Tutorial系列的第十二部分,我将告诉你如何以适配所有用户的 ...

  6. Flask 教程 第二十二章：后台作业

    本文翻译自The Flask Mega-Tutorial Part XXII: Background Jobs 这是Flask Mega-Tutorial系列的第二十二部分,我将告诉你如何创建独立于W ...

  7. 【mongodb系统学习之十二】mongodb修改数据（一）

    十二.mongodb修改数据:update 1).修改数据库数据:update:语法 db.collectionName.update({},{},boolean,boolean): 2).updat ...

  8. (C/C++学习笔记) 十二. 指针

    十二. 指针 ● 基本概念 位系统下为4字节(8位十六进制数),在64位系统下为8字节(16位十六进制数) 进制表示的, 内存地址不占用内存空间 指针本身是一种数据类型, 它可以指向int, char ...

  9. javascript设计模式学习之十二——享元模式

    一.享元模式的定义及使用场景 享元模式是为了解决性能问题而诞生的设计模式,这和大部分设计模式为了提高程序复用性的原因不太一样,如果系统中因为创建了大量类似对象而导致内存占用过高,享元模式就非常有用了. ...

随机推荐

  1. json字符串和对象的相互转换

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式. 同时,JSON是 JavaScript 原生格式,这 ...

  2. PHP搜索优化 sphinx 搭建测试

    安装.环境:win7 64位 1.下载sphinx文件包 下载地址:http://sphinxsearch.com/downloads/archive/ 2.解压到D:/sphinx.新建文件夹dat ...

  3. MySQL：比较两个数据表不同部分

    简单比较 1.SELECT * FROM t2 WHERE id NOT IN (SELECT id FROM t1); 2.SELECT * FROM t2 WHERE NOT EXISTS(SEL ...

  4. No module named zope.interface error 的解决

    在 import zope.interface 时,出现错误 No module named zope.interface error根据 http://stackoverflow.com/quest ...

  5. day18 12.丢失更新介绍与悲观锁

    共享锁在一条记录上是可以加多个的,共享嘛.排它锁的意思是指这条记录上如果有任何其他的锁我排它锁是加不上的,有了排它锁其他锁也是加不上的,唯一的.比如说现在我的记录上没锁,加了排它锁其他人使用不了,我这 ...

  6. HR招聘_(十)_招聘方法论（供应商管理）

    招聘和供应商长期合作,所以供应商管理也至关重要.供应商一般分为猎头,渠道,外包三类. 猎头 高端职位,高难度职位,急需职位和量大职位会和猎头公司合作共同完成招聘任务,猎头公司一般会有两种服务,猎头和R ...

  7. Chrome进行多分辨率测试

    在Web开发中,经常需要在不同的浏览器分辨率下进行测试,以确认页面是否可以适应不同的分辨率. 下载Resolution Test扩展程序 下载地址:http://pan.baidu.com/s/1gf ...

  8. 双系统删除ubuntu

    我的电脑安装了双系统,Windows和Linux,不过由于Linux在最近一段时间内不会使用,所以我打算删除Linux.    删除Linux最需要注意的地方,就是MBR(Master Boot Re ...

  9. .net core/.net 使用 CommandLineParser 来标准化地解析命令行

    CommandLineParser 是一款用于解析命令行参数的 NuGet 包.你只需要关注你的业务,而命令行解析只需要极少量的配置代码. 本文将介绍如何使用 CommandLineParser 高效 ...

  10. 学习JDK1.8集合源码之--Vector

    1. Vector简介 Vector是JDK1.0版本就推出的一个类,和ArrayList一样,继承自AbstractList,实现了List.RandomAccess.Cloneable.java. ...