如何快速打造一个有设计感的网站

2. Bootstrap 定制指南

决定使用 Bootstrap 是迈出的重要一步，相比其他可以在前端开发上节省很多精力，但有利有弊，如果你决定使用 Bootstrap 的话就意味着很有可能会和其他人“撞框架”，就像默认的 WordPress 皮肤一样，如果大家都完全用 Bootstrap 的样式的话，会让不少见得多的人心生厌烦。

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

一. 字体

修改网页字体是让网站看起来更有特色、有现代感的捷径，我们可以去谷歌的字体服务(免费正版)中随意挑选自己喜欢的字体，但是要注意字体间的搭配，在这里我们选择由 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;}

添加完后刷新即可查看效果了，现在我们的网站样式已经变成下面这样了，看起来比默认好多了。

此外，除了谷歌的字体服务外还可以使用像 Fontdeck或 Typekit 字体服务，它们的字体更多，更多的字体搭配方案可以参考Type Connection。

二. 纹理

知道如何让一个网站看起来更加高雅优雅一些吗?是的，纹理。就像 24WAY 的背景纹理一样。

但是这些纹理效果应该去哪里寻找呢?设计师 Atle Mo 的 Subtle Patterns 网站是个不错的去处，我们接下来就使用这个网站上的 Cream Dust 纹理。点击下载，将纹理图片保存到本地，然后放到根目录下的 /img/ 目录文件夹中，最后到 CSS 样式表中加入代码 body { background: url(/img/cream_dust.png) repeat 0 0;} 即可。(如果需要更多样式的纹理或纹理的其他用法的话可以看看 Smashing 的这篇文章)

添加纹理前后对比(大图)

三. 图标

这里的图标并不是指那些透明的 PNG 图片图标，而是图标字体，其加载方式和字体一样，由 CSS 样式控制，比起图片图标来说这种图标字体加载速度更加，对资源的消耗也更低。在去年 24WAY 曾经有一篇如何在网站中使用图标字体的文章。

对于 Bootstrap 框架来说，整合的图标字体是Font Awesome(Shifticons也是一个不错的选择)，和谷歌的字体服务一样也是免费开源的。要使用它只需将其下载下来，然后在根目录下创建 /fonts/ 文件夹，将其放进去。然后再将 font-awesome.css 文件放到 /css/ 目录文件夹。

接着将引用写入网页头部中，代码为 ，这时候我们可以随时在网站上任意地方自由使用这些图标字体了，如要想将一个卡车图标添加到注册按钮的话只需声明一下就可以，Sign up today。同时为了防止加入图标字体后引起按钮拉伸变形，还需要一点点额外的工作，将按钮宽度加大一点(.jumbotron .btn i { margin-right: 8px; })。最后效果如下：