bootstrap 第二章栅格系统

第二章栅格系统

序号	名字	类名	作用
1	容器	.container	响应式的布局容器 大屏（>=1200px）宽度是1170px中屏（>=992px）宽度是970px小屏（>=768px）宽度是750px
–	–	–	–
2	容器	.container-fluid	流失布局布局容器流失布局 百分百的宽适合做移动端开发
–	–	–	–
3	栅格系统		bs中的栅格系统将容器平均分为了12列bs中行和列的组合来创建页面
–	–	–	–
	行	.row	行是放在容器中的
–	–	–	–
	列	.column	列是当中行中的
–	–	–	–
	大屏	.col-lg-	大屏（>=1200px）下用到的列的类名是.col-lg
–	–	–	–
	中屏	.col-md-	.col-md-4 表示中屏下，该元素占比是4列
–	–	–	–
	小屏	.col-sm-	每一列默认左右都有15px的padding
–	–	–	–
	超小屏	.col-xs-	列里面可以同时添加其他屏下的类
–	–	–	–
4	列嵌套		子列会把会把父元素当中12份划分
–	–	–	–
5	列偏移	.col-md-offset-	.col-md-offset-4 偏移4份
–	–	–	–
6	列排序	.col-md-push-* 和 .col-md-pull-*	push由左到右,pull由右到左
–	–	–	–
7	响应式工具	hidden- * visible-	隐藏、显示

响应式工具

类名	大屏 lg	中屏 md	小屏 sm	超小屏 xs
hidden-lg	隐藏	显示	显示	显示
–	–	–	–	–
hidden-md	显示	隐藏	显示	显示
–	–	–	–	–
hidden-sm	显示	显示	隐藏	显示
–	–	–	–	–
hidden-xs	显示	显示	显示	隐藏
–	–	–	–	–
visible-lg	显示	隐藏	隐藏	隐藏
–	–	–	–	–
visible-md	隐藏	显示	隐藏	隐藏
–	–	–	–	–
visible-sm	隐藏	隐藏	显示	隐藏
–	–	–	–	–
visible-xs	隐藏	隐藏	隐藏	显示

8：什么是栅格系统？

	栅格系统又名网格系统，是有容器+行+列组成

9:容器最多容纳12列，多一列会在下一行显示，少一列，会把该列的位置空着