2019独角兽企业重金招聘Python工程师标准>>>

换装

简介

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

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

我们该怎么做？

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

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

因此怎么样才能在这么多限制下完成我们的 microblog 界面？

Bootstrap 简介

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

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

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。

转载于:https://my.oschina.net/CandyMi/blog/622465

（十二）Flask 学习 —— 换装相关推荐

20145240《信息安全系统设计基础》第十二周学习总结
20145240<信息安全系统设计基础>第十二周学习总结前三周博客链接第九周学习总结第十周学习总结第十一周学习总结视频学习内容总结指针数组与数组指针数组指针(也称行指针) 定 ...
20145206 《信息安全系统设计基础》第十二周学习总结
20145206 <信息安全系统设计基础>第十二周学习总结本周学习目标 1.第九周代码检查 2.第十周代码检查 3.第十一周代码检查博客链接 20145206 <信息安全系统设计 ...
工程伦理第十二章学习笔记2020最新
工程伦理第十二章学习笔记2020最新继续更新
第十二周学习周报（20180521-20180527）
第十二周学习周报一.本周学习情况 1.学习了吴恩达老师微专业课<深度学习工程师> 第三篇:结构化机器学习项目第一周内容:机器学习(ML)策略(1) 2.看了fast-rcnn算法详解和 ...
linux脚本求命令行上整数和,《Linux命令行与shell脚本编程大全》第二十二章学习札记...
<Linux命令行与shell脚本编程大全> 第二十二章学习笔记第二十二章:使用其他shell 什么是dash shell Debian的dash shell是ash shell的直系 ...
【Linux命令】《鸟哥Linux基础》第十二章学习shell脚本
第十二章学习shell脚本通常利用shell脚本完成服务器的检测工作,不涉及大量运算. 12.1 简单shell脚本介绍 12.2 简单shell脚本练习 12.2.1 简单范例范例1:永远的开 ...
20135327郭皓——信息安全系统设计基础第十二周学习总结
第十二周(11.23-11.29): 学习计时:共6小时读书: 代码: 作业: 博客: 一.学习目标掌握进程控制掌握信号处理的方法掌握管道和fifo进行进程间通信的方法二.学习资源编译. ...
第十二周-学习进度条
第十二周所花时间(包括上课) 20h 代码量(行) 230 博客园(篇) 2 了解到的知识点 fragment的相关知识转载于:https://www.cnblogs.com/liujinxi ...
201771010137 赵栋《第十二周学习总结》
一:理论部分 1.(1) 用户界面(User Interface)用户与计算机系统(各种程序)交互的接口 (2)图形用户界面(Graphical User Interface)以图形方式呈现的用户界面 ...

（十二）Flask 学习 —— 换装

换装

简介

我们该怎么做？

Bootstrap 简介

用 Bootstrap 装点 microblog

结束语

（十二）Flask 学习 —— 换装相关推荐

最新文章

热门文章