simple主题发布

设计

前言

上周末把博客改版了一下，这是第三次改版了，第一版很傻很天真（就是丑），第二版多图浮夸，这一版又回归本色，设计的极简，没有多余的装饰性图片。虽然简洁，但融入了很多前沿的技术，比如bootstrap,fontAwsome,fullpage.js。页面设计模仿了wordpress迷上的一张超级简洁又不失美丽的设计图。

一，bootsrap框架的使用

之前用过boostrap写页面，只是用它的一些组件，没有用它的响应设计。这次为了适应移动端，用了它的栅格系统和一些响应式类。这样css代码量减少了好多。我自己只写了一点分辨率在768以下的媒体查询css，博客就能适应很多分辨率。特别是导航那部分，我都没怎么自己写css，添加一些boostrap类就能自适应。简直太方便了。

boostrap的栅格系统就是把屏幕分成12列，分为超小屏幕（xs），小屏幕(sm)，中等屏幕(md)，大屏幕(lg)这4个尺寸，具体大小可在官网文档中查阅。在不同的尺寸下调用不同的类前缀就行了,例如：

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

boostrap还有一些非常实用的响应式类，用于在特定的分辨率下显示隐藏。例如：

.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*
.hidden-xs    /*仅在超小屏幕下隐藏*/

boostrap简单易学大大加快前端开发速度，想了解更多关于bootstrap的使用请参考官方文档。

二，fontAwesome字体图标

一年前就听说过fontAwesome字体图标，据说这种图标可以通过css改变大小和颜色，就像字体一样使用它。一直以为它很难，直到现在我才使用它，发现真的超级超级简单，更重要的是它的图标种类非常多，几乎涵盖了开发web应用的所有需要的图标。在项目中使用它非常简单，你可以将它的css下载下来然后像引用普通的css文件一样引用它，也可以直接引用cdn上的文件。

<link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

然后去官网上看它的文档学习，只要1秒就能学会用。它所有的图标都是向i标签里添加它的类，例如：

<i class="fa fa-navicon"></i>

它的图标不是图片，审查元素发现都是用css写的图标，因此能像普通的文本一样为它设置字体大小和字体颜色。例如：

.fa-navicon{
  font-siez:12px;
  color:gray;
}

在我的这版博客中使用了很多fontAwesome字体图标，不再像以前一样去找png图标。使用fontAwesome更快更灵活。强烈推荐它。
附一张该版本的设计图，以后再改版还能对比一下。

三，后记

关于fullpage.js的使用我会再写一篇文章介绍这个插件，它有个小坑。