凡是基本的布局需要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
项目总结
一、