英文博客地址：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. java的boolean和Boolean

    boolean是基本数据类型Boolean是它的封装类,和其他类一样,有属性有方法,可以new,例如: Boolean bl= new Boolean("true"); // bo ...

  2. fastjson string[]转 json字符串

    @RequestMapping(value = "/friendlink_list/province_list", produces = {"application/js ...

  3. 超高频率问题之信息: Illegal access: this web application instance has been stopped already. Could not load . The eventual following stack trace is caused by an error thrown for debugging purposes as well as

    出现频率非常高,目前还不确定具体是什么原因导致

  4. python基础--闭包and装饰器

    闭包函数:函数内部定义的函数:引用了外部变量但非全局变量 装饰器:有了闭包的概念再去理解装饰器就会相对容易一些.python装饰器本质上就是一个函数,它可以让其他函数在不需要做任何代码变动的前提下增加 ...

  5. Linux ifconfig 查看网络接口状态

    Linux ifconfig 如果不接任何参数,就会输出当前网络接口的情况: [root@localhost ~]# Linux ifconfig eth0      Link encap:Ether ...

  6. POJ1991 NOI1999棋盘分割

    棋盘分割 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 15581   Accepted: 5534 Description ...

  7. 用js控制video的src_百度知道

    代码如下 <section id="player"> <video id="media" width="100%" hei ...

  8. python之特点

    .python区分大小写:2.注释规范:python使用井号#作为单行注释,且注释的位置,一般放在要注释代码的前一行或这代码的右侧:多行注释则可以用连续三个单引号开始一行,并连续三个单引号在要注释的代 ...

  9. LUOGU P1053 篝火晚会 (Noip 2015 )

    题目描述 佳佳刚进高中,在军训的时候,由于佳佳吃苦耐劳,很快得到了教官的赏识,成为了"小教官".在军训结束的那天晚上,佳佳被命令组织同学们进行篝火晚会.一共有 nnn 个同学,编号 ...

  10. gawc全球城市

    http://www.lboro.ac.uk/gawc/world2016t.html Global city From Wikipedia, the free encyclopedia     Pa ...