bootstrap的布局
bootstrap的布局知识可参考 http://v2.bootcss.com/scaffolding.html#global
bootstrap布局的模型和构思
bootstrap使用了栅格化系统来布局,栅格化系统是网页以行列来切分,形成一个网格状的分布,内容在网格中定位;
这样就可以通过统一控制栅格化系统的宽,来镜像地缩小或者放大整个页面,达到自适应的初级效果。想象一下一张平展开的渔网,拉伸则每个网格就变大;收缩则每个网格就缩小;
当栅格化系统布局的网页,在从宽屏显示过渡到窄屏时,每个网格的宽度变小,当宽度 < 网格中的内容的宽度时,需要内容自动缩小宽度,并向纵向延伸,来达到网格依然能容纳下内容的目的,因此千万不要设置网格的高度,和内容的宽度。
boostrap栅格化网格宽与网格间margin计算
boostarp一行内网格之间存在一定的margin间距,以及可以设置网格之间的偏移;
宽、margin间距以及网格偏移的计算
1.固定px栅格
宽度分配公式:12X+11Y=940
某一spanNum下的span宽度计算:spanNum* X+(spanNum-1)* Y
某一offsetNum下的offset值计算:offsetNum* X+(offsetNum+1)* Y
2.百分比栅格
宽度分配公式:12X+11Y=100
某一spanNum下的span宽度计算:spanNum* X+(spanNum-1)* Y
某一offsetNum下的offset值计算:
非首个offset: offsetNum* X+(offsetNum+1)* Y;
首个offset: offsetNum* X+offetNum* Y
bootstrap静态px布局
bootstrap的静态px布局,就是栅格化系统每个网格的宽度都是以px单位来设置的;
px单位设置的宽度,在从宽屏显示过渡到窄屏时,自然是无法自适应缩小的,bootstrap使用媒体查询@media
来查询不同的设备分辨率,在不同设备下设置不同的px宽度来放大或缩小网格,在不改变整体布局的情况下镜像放大缩小网页。
bootstrap百分比布局
bootstrap百分比布局,使用百分比设置网格的宽度。百分比自然是可以自适应缩小放大网格大小的,同样在不改变整体布局的情况下镜像放大缩小网页。
bootstrap响应式布局
当镜头px布局或百分比布局在镜像缩小网页到影响阅读的情况下,比如文字过小,图文不清晰等;
这个时候就需要改变网页的布局来适应这种情况,响应式布局就为这类开发需求服务;
bootstrap主要提供了两类响应式布局的工具:
1.在屏幕宽度缩小到一定数值时,把栅格化系统的一行多列,直接转换成一行一列,以达到放大清晰内容的目的;
2.在pc,tablet,phone不同设备上,存在有需要显示和隐藏的开发需求。bootstrap提供了.visible-phone
(在手机上显示)、.hidden-phone
(在手机上隐藏)、.visible-tablet
、.hidden-tablet
、.visible-desktop
、.hidden-desktop
。