（十二）Flask 学习 —— 换装

时间 2019-11-06

标签十二 flask 学习换装栏目 Python 繁體版

原文原文链接

换装

简介

若是你一直追随着 microblog 应用程序，你可能发现咱们并无在应用程序的外观上花不少的时间。到目前为止，咱们使用的模板是基本的，而且没有风格而言。这也是有帮助的，当咱们编码的时候，咱们不想为编写好看的 HTML 而分心。css

这篇文章将会与之前的有所不一样，由于写好看的 HTML/CSS 是一个巨大的话题，超出这一系列的预期范围。这里不会有任何 HTML 或 CSS 的细节，咱们将只讨论基本的指导方针和思路。html

咱们该怎么作？

虽然咱们能够认为编码是很难的，可是这些痛苦比不上那些网页设计师，他们必须编写好的而且具备一致性的模板以适应各类浏览器。在现在的社会中，他们不单单须要使得设计在常规的浏览器上看起来不错，而且还须要在平板电脑、智能手机上的浏览器上显得好看。python

不幸地是，学习 HTML, CSS 以及 Javascript，而且清楚它们在每一种浏览器上的特性是一个深不见底的任务。咱们不可能有不少的时间去作。咱们只但愿少投入些精力让咱们的应用程序好看。jquery

所以怎么样才能在这么多限制下完成咱们的 microblog 界面？git

Bootstrap 简介

咱们在 Twitter 里的好朋友发布了一个开源 web 框架，叫作 Bootstrap，它可能就是咱们的救命稻草。github

Bootstrap 是最多见的网页类型的 CSS 和 Javascript 工具的集合。若是你想要看用这个框架设计的网页，请看这些例子。web

Bootstrap 擅长以下这些东西:flask

在全部的主流浏览器上看起来同样bootstrap
台式机，平板电脑和手机的屏幕大小不一的处理浏览器
可定制的布局
多风格的导航栏
多风格的表单
其它不少，不少...

用 Bootstrap 装点 microblog

在咱们把 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.min.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>

接下来咱们须要对模板作的改变有:

整个页面的内容使用固定的布局与响应功能
使用 Bootstrap 的表单形式替换全部的表单
使用导航替换咱们的导航栏
用分页按钮改变上一页以及下一页的连接
为闪现消息使用 Bootstrap 的警告样式
使用样式图片来表示登陆表单中的推荐的 OpenID 提供商

咱们不会详细解释每个变化了，由于这些是至关简单。Bootstrap 官方文档会对你们颇有帮助的。

结束语

为了让你们先目击下装点后的应用程序，这里有一些对比截图供你们欣赏。

若是你想要节省时间的话，你能够下载 microblog-0.12.zip。