评论 收藏
分享文章
协作翻译 Web/WAP应用开发
正文

Flask 教程，第十二部分：整合 已翻译 100%

oschina 投递于 2012/12/28 09:47 (共 7 段, 翻译完成于 12-29)
阅读 14858
收藏 8
评论 1
Flask
英文原文：The Flask Mega-Tutorial, Part XII: Facelift
顶 0

参与翻译 (1人) : lomatus

打印
仅中文 中英文对照 仅英文
加载中

这篇文章是我记录我使用Python的微型框架Flask来编写网络程序的经验系列文章的第十二篇。

这系列教程的目的是开发一个功能像样的微型博客应用，并展示所有并非独创的，我决定称之为微型博客（轻博客？）。

这里是系列教程的目录，迄今为止已经发布的如下：

lomatus
lomatus
翻译于 2012/12/28 15:22
顶
2

介绍

如果你耍过一会微博程序，你一定会注意到我们还没有花费很多时间在它的外表上。到目前为止我们模版部分的组织还非常基础，且没有任何样式。这样很有好处，因为我们并不希望在编程时分散注意力到写好看HTML上。

但是现在我们不得不认真地花费些许时间来写了，所以今天我们中断一会来看看我们可以做些什么来让我们的程序对用户来说具有一些吸引力。

这篇文章与之前的将有所不同，因为写漂亮的HTML/CSS是一个浩瀚的话题并且会脱离这个系列文章初衷。这里讲不会有详细的HTML或CSS代码，我们将要讨论的是基本的路线和想法来更接近于完成该任务

lomatus
lomatus
翻译于 2012/12/28 15:38
顶
2

我们如何做？

当我们可以证明编程很苦逼，相比网页设计者来说我们的痛苦什么也不是，他们必须写出漂亮的并且在清单里的每一个浏览器里都显示一致的模版，而这些浏览器大多隐藏了BUG或者奇特的问题。再者在这个时代，他们不仅仅需要使他们的设计在不合格的浏览器里看起来不错，还要在资源有限的平板和智能手机的浏览器里显示。

不幸的是，学习HTML、CSS和Javascript并避免在不同浏览器显示正常是一个不确定及测算的任务。我们真的没有时间（或者兴趣）做这个。我们只是想让我们的程序看起来正常并且少花费精力。

所以我们如何在这么多限制下完成添加样式到我们的微型博客的任务？

lomatus
lomatus
翻译于 2012/12/28 15:53
顶
2

介绍Bootstrap

我们来至Twitter的好朋友发布一个开源的Web框架叫Bootstrap ，它可能就是我们制胜关键。

Bootstrap是一个用于所有通用类型的网页开发的CSS和Javascript组件集合。如果您想看看使用这个框架可以开发的页面效果，这里是一些样例。

下面是Bootstrap擅长的地方：

  • 在主流浏览器上显示一致
  • 自动捕获桌面，手机和平板的屏幕尺寸
  • 自定义布局
  • 完整样式的导航条
  • 完整样式的表单
  • 还有很多很多...
lomatus
lomatus
翻译于 2012/12/28 16:04
顶
2

Bootstrap微型博客

在我们将Bootstrap添加到我们程序中前，首先需要安装BootStrap的CSS/Javascript/图片等文件到我们Web服务器能够找到的地方.

在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>

<link>和<script>标签加载Bootstrap的CSS和Javascript文件。注意这里还需要的Javascript文件是jQuery，它被Bootstrap的一些插件所使用。

lomatus
lomatus
翻译于 2012/12/28 16:21
顶
2

<meta>标签可以开启Bootstrap的响应式模式, 它缩放页面以适应桌面、平板和智能手机。

将这些改动添加到我们base.html模版里，我们就可以开始使用Bootstrap了，它简单地在我们的模版里做了些修改。

我们所要做的修改如下:

我们将不会讨论以上这些特殊的修改因为这些很简单。有意思的是，这些修改都可以在这个github提交用diff来查看。Bootstrap参考手册在尝试分析新的微型博客模版时会非常有用。

lomatus
lomatus
翻译于 2012/12/28 16:37
顶
2

最后

今天我们承诺不写一行代码，我们坚持这样做。所有的我们所做的增加或修改都是修改模版文件。

只是为了给您一个巨大的转变的思路，这里有之前的和现在的一些截图。点击图片来放大他们。

如果想要改进程序可以再如下地址下载他们:

下载microblog-0.12.zip.

在下一章节我们打算改进日期和时间的显示格式。期望届时能再次见到您的身影！

lomatus
lomatus
翻译于 2012/12/28 16:43
顶
2
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
加载中

评论(1)

lomatus
lomatus
2012/12/28 17:17
其实有一个Flask的插件 flask-bootstrap
https://github.com/mbr/flask-bootstrap
PS:翻译需要审核？
举报
删除一条评论

评论删除后，数据将无法恢复

取消
确定
返回顶部
顶部