英文博客地址：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. ssh 连接vps

    默认端口22 ssh root@194.10.10.10 特定端口xxx 上面命令后面加上 "-p xxx" 就可以了

  2. laravel--设置不需要csrfToken校验的接口

    一般是前后端分离或者支付宝响应的时候需要不设置csrfToken校验的接口,laravel推荐使用passport安全校验设计接口

  3. 20190921-雅礼Day1

    #error 此人太蒻无法编译 #include<iostream> main(){} Before 哦…… -O2 T1 序列问题:分块(莫队),树状数组,线段树,分治 离线 or 在线 ...

  4. CI框架--URL路径跳转与传值

    CI框架使用URL的前提是需要加载辅助函数$this->load->helper('url');当然我建议大家将所有需要加载的东西写在构造方法内,这样就不需每个控制器每个方法都去调用一次了 ...

  5. JSP向后台传 递 参 数 的四种方式

    一.通过Form表单提交传值 客户端通过Form表单提交到服务器端,服务器端通过 Java代码 request.getParameter(String xx); 来取得参数(xx)为参数名称.通过ge ...

  6. 2019.8.1 NOIP模拟测试11 反思总结

    延迟了一天来补一个反思总结 急匆匆赶回来考试,我们这边大家的状态都稍微有一点差,不过最后的成绩总体来看好像还不错XD 其实这次拿分的大都是暴力[?],除了某些专注于某道题的人以及远程爆踩我们的某学车神 ...

  7. POJ1991 NOI1999棋盘分割

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

  8. PHP获取真实客户端的真实IP的方法

    REMOTE_ADDR 是你的客户端跟你的服务器“握手”时候的IP.如果使用了“匿名代理”,REMOTE_ADDR将显示代理服务器的IP. HTTP_CLIENT_IP 是代理服务器发送的HTTP头. ...

  9. SAE J2534介绍

    概要 J2534是一种针对与射频相关的ECU进行闪存编程的概念,而不用考虑ECU使用的通信协议.其目的是所有类型的ECU都应当只需一个工具(硬件设备),通常被称为通过式设备.J2534设备和ECU之间 ...

  10. golang的包规则

    1.包声明:文件所在目录,有利于源码整体迁移. 2.包导入:4种方式. ---------------------------------------------------------------- ...