bootstrap学习

bootstrap

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单
中文网 ： http://www.bootcss.com/
英文网 : http://getbootstrap.com/

容器

流体布局容器

• container
  容器的width为auto，只是两边加了15px的padding。

固定布局（响应式布局）

• containier-fluid
  容器的width会随设备分辨率的不同而生产变化
  分辨率阈值
  w >=1200 容器的width为1170 左右padding为15 （注意是borderBox）
  1200>w >=992 容器的width为970 左右padding为15 （注意是borderBox）
  992 > w >=768 容器的width为750 左右padding为15 （注意是borderBox）
  768 > w 容器的width为auto 左右padding为15 （注意是borderBox）

栅格系统

row 行

col-*-* 列 实例 col-md-4

第一个参数

• lg 大屏 大屏及以上生效
• md 中屏 中屏及以上生效
• sm 小屏 小屏及以上生效
• xs 超小屏 超小屏及以上生效

第二个参数

默认会把一行分成12等份，表示当前的元素占12份中的几分

• col-lg-x
• col-md-x
• col-sm-x
• col-xs-x
• x默认拥有12个等级

列偏移

col-xs-offset-4 往右偏移4等份
调整的是margin-left，分13个等级（0到12）
0时为0%

列排序

col-xs-push-9 往右推9份
col-xs-pull-3 往左拉3份
push的时候调整的是left，分13个等级（0到12）
0时为auto

pull的时候调整的是right，分13个等级（0到12）
		0时为auto

响应式工具

• 为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。

• 有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。
  

• pull-left 左浮动

• pull-right 右浮动

容器与栅格盒模型设计的精妙之处

• container 提供了一个15px的padding
• row 是 column 直接存在的容器，row 默认最多可有12个 column，同时作为都是左浮动的 column 的 wrapper，自带 clearfix 的性质。同时 row 还有一个很特殊的地方，就是左右各有 －15px 的 margin，为了抵消 container 中15px的 padding。每个column 也会有15px的水平方向的 padding，colunmn 只能在 row 中生存，由于 row 的 margin 为－15px，那么位于两边的 column 就碰到container 的边界。但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container，同时 不同column的内容之间就有了30px的槽。目的是为了确保列与列之间有30px的槽，列与容器之间有15px的槽

js插件

• collapse 折叠js插件
• carousel 轮播图js插件
• affix 固定导航js插件