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

Flask学习之十二使用boostrap