bootstrape实战案例_bootstrap实战经验

凡是基本的布局需要float实现的，都可以考虑利用网格布局。

1，.jumbotron可以形成一个青灰色的背景，并自动调节对应边距

2，.panel的应用十分广泛，可以自动设置合适的padding.甚至利用它实现footer等(panel-footer)

3, text-justify对齐方式的使用

4，可以使用网格布局来控制图片的大小，结合max-width:100%.

5，top 和left是针对元素的左上角而言，absolute定位的占据一定面积的元素而言，针对于父元素的水平居中对齐，使用left:50%后，还需要margin:-水平宽度的一半。

6，外围元素设定clearfix之后，可以解决其中的浮动元素凸出的问题，可是如果外围元素浮动定位，内层元素决定定位造成的凸出，不能使用这种方法来解决，只能够定义外围元素的高度。

7，如果height，line-height比元素的默认高度还小，不可能得到垂直居中的效果。

8，元素一旦脱离页面流(float，绝对定位，相对定位)，就相当于一个inline-block，可以为之设定宽度，为内连元素设置宽度没有效果。

9，为链接设置样式要遵循love hate的顺序(link,visited,hover,active)

10，bootstrap默认的样式可以被覆盖，例如，对于轮播组件，可以利用下列代码更改左右导航的样式。

11.创建响应式的布局，对于外层div的width，margin等，要善于利用百分比作为单位；同时限定max-width诸如：

.section{width:75%;max-width:600px;margin:5% auto 0;background-color:rgba(255,255,255,0.3);padding:3%;

}

百分比响应式布局

.carousel-control.left, .carousel-control.right{top:40%;background:none;font-size:50px;

}

轮播导航样式覆盖

12,善于使用rgba造成蒙版效果

13，bootstrap的col之间没有margin，但是内部有一定的padding。

14,利用transform，transion可以实现一些2d，乃至3d的旋转效果，一个示意可以参见：http://codepen.io/betdream/details/qiGrg

项目总结

一、