这篇文章是我记录我应用Python的微型框架Flask来编写搜集次序的阅历系列文章的第十二篇。
这系列教程的目的是开发一个功用像样的微型博客运用,并展示一切并非开创的,我决定称之为微型博客(轻博客?)。
这里是系列教程的目录,迄今为止已经公布的以下:
引见
假设你耍过一会微博次序,你肯定会留心到我们还没有花费十分多时间在它的外表上。到目前为止我们模版部分的组织还非常基础,且没有任何样式。多么很有好处,因为我们实在不渴望在编程时分散留心力到写美观HTML上。
可是现在我们不能不细心地花费些许时间来写了,所以今天我们中断一会来看看我们可以做些什么来让我们的次序对用户来说具有一些吸引力。
这篇文章与之前的将有所不合,因为写漂亮的HTML/CSS是一个浩荡的话题并且会分开这个系列文章初衷。这里讲不会有详细的HTML或CSS代码,我们将要谈判的是基本的路途和想法来更接近于完成该Task
当我们可以证明编程很苦逼,比拟网页设计者来说我们的痛苦什么也不是,他们必须写出漂亮的并且在清单里的每一个浏览器里都显示一致的模版,而这些浏览器大多隐藏了BUG也许奇特的问题。再者在这个时代,他们不但单需求使他们的设计在不合格的浏览器里看起来不错,还要在本钱有限的平板和智高手机的浏览器里显示。
不幸的是,学习HTML、CSS和Javascript并避免在不合浏览器显示正常是一个不时定及测算的Task。我们真的没有时间(也许兴味)做这个。我们只是想让我们的次序看起来正常并且少花费精神。
所以我们怎样在这么多限制下完成添加样式到我们的微型博客的Task?
我们来至Twitter的好冤家公布一个开源的Web框架叫Bootstrap ,它可能就是我们制胜关键。
Bootstrap是一个用于一切通用类型的网页开发的CSS和Javascript组件凑集。假设您想看看应用这个框架可以开发的页面结果,这里是一些样例。
下面是Bootstrap擅长的地方:
Bootstrap微型博客
在我们将Bootstrap添加到我们次序中前,首先需求装备BootStrap的CSS/Javascript/图片等文件到我们WebServer可以找到的地方.
在Flask内app/static目录就是这些文件适合的去向。Server知道怎样去找到这些文件假设它的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的一些插件所应用。
<meta>标签可以开启Bootstrap的响应式方式, 它缩放页面以适应桌面、平板和智高手机。
将这些修正添加到我们base.html模版里,我们就可以够Start应用Bootstrap了,它轻易地在我们的模版里做了些修改。
我们所要做的修改以下:
我们将不会谈判以上这些特殊的修改因为这些很轻易。故意思的是,这些修改都可以在这个github提交用diff来反省。Bootstrap参考手册在检验测验分析新的微型博客模版时会非常有效。
今天我们许愿不写一行代码,我们坚持多么做。一切的我们所做的增加或修改都是修改模版文件。
只是为了给您一个庞大的改动的思路,这里有之前的和现在的一些截图。点击图片来放大他们。
假设想要改进次序可以再以下地址下载他们:
不才一章节我们方案改进日期和时间的显示格式。希冀届时能再次见到您的身影!
本文中的一切译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。 2KB翻译Task依照 CC 协议,假设我们的Task有侵犯到您的权益,请及时联系我们。2KB项目(www.2kb.com,源码交易平台),提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务