前言:公司突然要弄微信,作为一个全能(实际是打杂的什么都做)的我,当然被拉进去了。久违的前端页面,这次是要做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"属性。但笔者以防万一,都会找好多种解决方案,如下就是不依靠框架的实现。
这方法简洁易懂,可惜就是要设定底部的高位固定高度,这对于自适应和响应式布局的要求来说美中不足。不过各位可以通过各种方法来修改,视实际需求来决定。