一次H5的前端小记

前言：公司突然要弄微信，作为一个全能（实际是打杂的什么都做）的我，当然被拉进去了。久违的前端页面，这次是要做H5手机端的前端。做一些杂记，人老了太久没用这些技术，以前和你熟悉现在都陌生了。

一。bootstrap

这次笔者使用bootstrap作为H5的前端框架。体验上说，最特点的是bootstrap的  栅格系统，至于很牛逼的LESS那些暂时没用到。

使用过程中，笔者认为，bootstrap要作为一个web的轮廓框架来使用，对于web的细节，需要自己去实现。这样也就可以理解bootstrap为什么能这么普及适用。千万别想着所有东西都能靠它来完善。过程中看过教程，本来想调整gutter的，使用教程中的@grid-gutter-width，失效！很失望！最后笔者是通过调整列的padding来去掉gutter的。

二。背景图片自适应

http://blog.csdn.net/jbb0403/article/details/23938197

很简洁好用的2段代码，笔者使用的是第一段。补充：这个自适应背景是针对全屏的。

三。图片垂直居中

其实这个方法的话很多，

1.给父元素设置text-align=center

2.设置父元素的margin:0 auto；等等

这里还有一种使用display:table思路的。对于bootstrap来说，某些场合使用，因为毕竟更改了块的属性。会导致某些bootstrap效果达不到目的

3.http://www.cnblogs.com/cnliu/archive/2012/06/20/image-center.html

四。固定底部导航栏

在bootstrap中其实也有方法实现了，就是通过给<nav>标签添加class=“navbar navbar-fixed-bottom" role="navigation"属性。但笔者以防万一，都会找好多种解决方案，如下就是不依靠框架的实现。

http://zhidao.baidu.com/link?url=_OI221uklAV5C5F9_1muDdlCCEYLnxH715IrB-zANHt42bS0BsHZbyv1lmSdyGRUAATzlfhv1It_p03bUU4tzYliraRHnYvMt76orO5Uaou

这方法简洁易懂，可惜就是要设定底部的高位固定高度，这对于自适应和响应式布局的要求来说美中不足。不过各位可以通过各种方法来修改，视实际需求来决定。