bootstrap 网格系统学习

让我们来理解一下上面的语句。Bootstrap3是移动设备优先的，在这个意义上，Bootstrap代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

从上面的描述上可以知道：

1，网格系统是把屏幕定义为12列，根据屏幕百分比动态调整大小。

2，屏幕定义分为4种类型：

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

/*小型设备（平板电脑，768px起）*/
@media(min-width:@screen-sm-min){...}

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

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

3，所有的网络布局必须定义在

container类和row类里面。

看下面的网络系统结构：

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

注意：
1，row类里面的列数之和必须小于或等于12，小于12时，从左到右依次排列。不足12列时，补空。第一行是3列和5列。右边空出4列。
第二行是满屏显示。



2，超过12列时，从要超过的下一列开始，换行往下排。

<divclass="row">
<divclass="col-md-6"style="background-color:#dedef8;box-shadow:inset1px-1px1px#444,inset-1px1px1px#444;">
<p>
Loremipsumdolorsitamet,consecteturadipisicingelit,seddo
eiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Ut
enimadminimveniam,quisnostrudexercitationullamcolaboris
nisiutaliquipexeacommodoconsequat.
</p>
</div>

<divclass="col-md-7"style="background-color:#dedef8;box-shadow:inset1px-1px1px#444,inset-1px1px1px#444;">
<p>
Sedutperspiciatisundeomnisistenatuserrorsitvoluptatem
accusantiumdoloremquelaudantium.
</p>
</div>
</div>

<divclass="row">
<divclass="col-md-6"style="background-color:#dedef8;box-shadow:inset1px-1px1px#444,inset-1px1px1px#444;">
<p>
Loremipsumdolorsitamet,consecteturadipisicingelit,seddo
eiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Ut
enimadminimveniam,quisnostrudexercitationullamcolaboris
nisiutaliquipexeacommodoconsequat.
</p>
</div>

<divclass="col-md-6"style="background-color:#dedef8;box-shadow:inset1px-1px1px#444,inset-1px1px1px#444;">
<p>
Sedutperspiciatisundeomnisistenatuserrorsitvoluptatem
accusantiumdoloremquelaudantium.
</p>
</div>
</div>

3，列嵌套请在列里使用row类。然后再在嵌套的列里满足12列时，和网络系统一样。

4，列偏移，列偏移是向左外边距margin增加配置的列数。

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=*类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用.col-md-offset-*类。这些类会把一个列的左外边距（margin）增加*列，其中*范围是从1到11。

在下面的实例中，我们有<divclass="col-md-6">..</div>，我们将使用.col-md-offset-3class来居中这个div。