Bootstrap布局模型

bootstrap的布局

bootstrap的布局知识可参考 http://v2.bootcss.com/scaffolding.html#global

bootstrap布局的模型和构思

bootstrap使用了栅格化系统来布局，栅格化系统是网页以行列来切分，形成一个网格状的分布，内容在网格中定位；

这样就可以通过统一控制栅格化系统的宽，来镜像地缩小或者放大整个页面，达到自适应的初级效果。想象一下一张平展开的渔网，拉伸则每个网格就变大；收缩则每个网格就缩小；

当栅格化系统布局的网页，在从宽屏显示过渡到窄屏时，每个网格的宽度变小，当宽度 < 网格中的内容的宽度时，需要内容自动缩小宽度，并向纵向延伸，来达到网格依然能容纳下内容的目的，因此千万不要设置网格的高度，和内容的宽度。

boostrap栅格化网格宽与网格间margin计算

boostarp一行内网格之间存在一定的margin间距，以及可以设置网格之间的偏移；

宽、margin间距以及网格偏移的计算

1.固定px栅格

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。

我对bootstrap布局的学习项目

https://github.com/unnKoel/bootstrap_layout