BootStrap入门学习笔记(二)

BootStrap网格系统(Grid System)

BootStrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口(Viewport)尺寸的增加，系统会自动分为最多12列。

BootStrap网格系统的工作原理

网格系统通过一系列包含内容 的行和列来创建页面布局。

媒体查询

媒体查询是非常别致的“有条件的CSS规则”。它只适用于一些基于某些规定条件的CSS。如果满足相应的条件，则应用相应的样式。

/*超小设备(手机，小于768px)*/
/*BootStrap中默认情况下没有媒体查询*/

/*小型设备(768px起)*/
@media(min-width:@screen-sm-min){...}

/*中型设备(台式电脑，992px起)*/
@media(min-width:@screen-md-min){...}

/*大型设备(大台式电脑，1200px起)*/
@media(min-width:@screen-lg-min){...}

有时候也可以在媒体查询代码中包含max-width，从而将CSS的影响限制在更小范围的屏幕大小之内。

网格选项

基本的网格结构

<div class="container">
	<div class="row">
		<div calss="col-*-*"></div>
		<div class="col-*-*"></div>
	</div>
	<div class="row">...</div>
</div>
<div class="container">...</div>	

偏移列

偏移是一个用于更专业的布局的有用功能。
为了在大屏幕显示器上使用偏移，我们可以使用.col-md-offset-*类，这些类会把一个列的左外边距(margin)增加 * 列，其中 * 范围是从1到11。

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的.row，并在一个已有的.col-md-*列内添加一组.cod-md-*列。被嵌套的行应包含一组列，这组列个数不能超过12。

列排序

BootStrap网格系统其中一个完美的特性，就是可以很容易地以一种顺序编写列，然后以另一种顺序显示列。
可以很轻易地改变带有.col-md-push-*和.col-md-pull-*类地内置网格列的顺序，其中 * 范围是从1到11。