英文博客地址：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. TZ_15Spring-Cloud_Eureka-Ribbon-Hystix-Feign-Zuul微服务整合

    1.一个微服务框架的基本流程 2.Eureka                                   --Feign-Zuul Eureka:就是服务注册中心(可以是一个集群),对外暴露 ...

  2. Linux字体美化实战(Fontconfig配置)（转）

    原文地址:http://www.jinbuguo.com/gui/linux_fontconfig.html 本文的主题是Linux环境下的字体美化,但是首先得要有字体,然后才能谈美化.所以第一件事就 ...

  3. 原生js增加，移除类名

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 正确而又严谨得ajax原生创建方式

    自己去封装一个xhr对象是一件比较麻烦的事情.其实也不麻烦,注意逻辑和一个ie6兼容方案(可无),和一个304 其他2开头的status都可以就好了 <!DOCTYPE html> < ...

  5. ubuntu 软件的更新及解决软件中心自己无法打开

    sudo apt-get update sudo apt-get dist-upgrade sudo apt-get install --reinstall software-center

  6. day18 17.c3p0连接池使用

    连接池时间长不用空闲着,dbcp是不回收的,性能可能有些问题.c3p0是可以自动回收.实际开发中c3p的生产力比dbcp强,性能上更强. package cn.itcast.datasource; i ...

  7. sending data mysql slow Mysql查询非常慢的可能原因

    1.用explain看看mysql的执行情况,可以得知,task_id扫描了近20万条数据,而且这个task_id不是索引 2.为这个task_id所在的表,将此字段添加索引后,查询就变得很快了

  8. leetcode 1-20 easy

    1.Two Sum Given an array of integers, return indices of the two numbers such that they add up to a s ...

  9. JavaScript--location.href的跳转

    页面重载 true 强制从服务器加载  false 优先从缓存加载  window.location.reload(true); window.location.href.self.location. ...

  10. 数据挖掘案例:基于 ReliefF和K-means算法的应用

    数据挖掘案例:基于 ReliefF和K-means算法的应用 数据挖掘方法的提出,让人们有能力最终认识数据的真正价值,即蕴藏在数据中的信息和知识.数据挖掘(DataMiriing),指的是从大型数据库 ...