[焦点提醒] 还在用 WordPress 建站吗?落伍了亲!赶紧试试 Twitter Bootstrap 吧。

　　注：拥有属于自己的网站是良多人的胡想，但年夜年夜都人只能借助像 WordPress 这样的 CMS 实现，甚至良多公司网站也是这样。但这些网站年夜年夜都看起来都斗劲缺乏设计感，通俗来讲就是有点“土”。那么对于像轨范员以及其他对设计斗劲小白们来说，若何能让你的网站看起来加倍前卫，有范，有设计感呢?极客公园编译了 24WAYS 的文章 How to Make Your Site Look Half-Decent in Half an Hour 为您供给解决体例。

　　像我这样的轨范员来说经常被“设计”这个词吓到，因为我是一名轨范员而不是设计师，我拥有的是计较机学位证，此外我对 Comic Sans 字体并不介意。(注：Comic Sans 字体是 Win95 附带的一种漫画字体，设计行业极为排斥，设计师或那些拥有美学情结的人不屑与之为伍。更多查看这篇为什么不要使用 Comic sans 字体)

　　虽然只是一名轨范员，但我仍是想让自己的网站看起来加倍吸惹人，一方面出于虚荣，因为这样可以显得我加倍“专业”，而另一方面是出于现实，因为研究机构发芽拜访发现用户会加倍信赖那些网站“看起来”很好的网站。可是因为很长时刻一向年夜事的是编程工作，对设计并不是熟悉，甚至害怕，因为在我这个外行看来设计是由良多只能感应感染不能上行下效的轨则以及所谓的设计感悟组成的，常识壁垒斗劲高。

　　可是不久之前我抉摘要尽我最年夜全力让我网站看起来显得加倍专业一点，即使比不上真正由设计师操刀做出来的效不美观，但对像我这种没有设计能力的人来说仍是很有辅佐的。

　　如不美观你还没有使用 Bootstrap 的话那么赶紧起头吧，这个来自 Twitter 的开源项目使得网站设计真正进入公共化时代。

　　这里我们将使用 Winter Sun 这张照片，为了让网站连结自顺应结构，还需要使用 Backstretch 这个 jQuery 插件让布景图可以随时自动调整巨细。

　　1. 使用 Bootstrap

　　素质上 Bootstrap 是一种隔栅系统，由两名 twitter 员工 Mark Otto 和 Jacob Thornton 开发的开源前端框架[注：想体味更多请查看什么是 Twitter Bootstrap?]，它集成了良多 CSS 样式的合集，可以辅佐那些不懂或者不擅长 CSS 的开发人员快速的成立一个外不美旁观起来很不错的网站。

　　使用 Bootstrap 的另一个益处就是网站自己就是自顺应的(Responsive)，可以省去各类为移动设备等的适配工作。此外，Bootstrap 仍是可定制的，可以按照你的需求自己设置装备摆设。(注：英文欠好的可以查看中文版的 Bootstrap 文档或 Bootstrap中文网)

　　2. Bootstrap 定制指南

　　抉择使用 Bootstrap 是迈出的主要一步，对比其他可以在前端开发上节约良多精神，但有利有弊，如不美观你抉择使用 Bootstrap 的话就意味着很有可能会和其他人“撞框架”，就像默认的 WordPress 皮肤一样，如不美观巨匠都完全用 Bootstrap 的样式的话，会让不少见得多的人心生厌恶。

　　在这里，虽然不成能像年夜公司网站那样取色严谨，但仍是有一些快速的体例使网站看起来很搭配的。

　　所以，如不美观其实抽不出时刻的话可以去Wrap Bootstrap采办一份主题皮肤，这些主题皮肤都是由专业的设计师设计的，虽然不会成为唯必然制的，但已经看起来相当不错了，而且这种体例是最快速的。接下来就是以 Narrow marketing 这个模板(下图)为例教你若何自己定制一份完全属于你自己的 Bootstrap 。

　　这里的停笔并不是指那些透明的 PNG 图片停笔，而是停笔字体，其加载体例和字体一样，由 CSS 样式节制，比起图片停笔来嗣魅这种停笔字体加载速度加倍，对资本的耗损也更低。在去年 24WAY 曾经有一篇若何在网站中使用停笔字体的文章。

　　改削网页字体是让网站看起来更有特色、有现代感的捷径，我们可以去谷歌的字体处事(免费正版)中随意遴选自己喜欢的字体，可是要注重字体间的搭配，在这里我们选择由 DesignShack 举荐的谷歌字体搭配中的一种：Cardo(用于问题) 和 Nobile(用于主体内文)。

　　在 CSS 样式表 custom.css 中插手以下代码：h1, h2, h3, h4, h5, h6 {font-family: 'Corben', Georgia, Times, serif;} p, div {font-family: 'Nobile', Helvetica, Arial, sans-serif;}

　　添加完后刷新即可查看效不美观了，此刻我们的网站样式已经酿成下面这样了，看起来比默认良多若干好多了。

　　二. 纹理

　　知道若何让一个网站看起来加倍文雅优雅一些吗?是的，纹理。就像 24WAY 的布景纹理一样。

　　原文地址：http://www.geekpark.net/read/view/176891