1. 什么是Bootstrap的网格系统
在Bootstrap中，网格系统是一套用于创建响应式布局的工具。Bootstrap的网格系统可以让开发者轻松地将一个页面布置为12列，使用这些列可以实现各种不同的布局。而且，网格系统能够让开发者充分利用页面上的空间，让页面看起来更加美观和整洁。
<div class="container">
<div class="row">
<div class="col-md-4">1/3</div>
<div class="col-md-4">1/3</div>
<div class="col-md-4">1/3</div>
</div>
</div>
2. 网格系统的基本结构
Bootstrap的网格系统由三个要素构成：容器（Container）、行（Row）和列（Column）。其中，容器是用来包含行和列的，而行则是用来包含列的。每一行最多可以包含12列，而且这些列是等宽的。
2.1 容器（Container）
Bootstrap提供了两种容器：.container和.container-fluid。其中，.container是固定宽度的，而.container-fluid是100%宽度的。
容器的使用方法如下：
<div class="container">
...
</div>
<div class="container-fluid">
...
</div>
2.2 行（Row）
行是用来包含列的，每一行最多可以包含12列。行与列之间不能有空隙，否则可能会导致布局失效。
行的使用方法如下：
<div class="row">
...
</div>
2.3 列（Column）
列是网格系统的最基本单位，每一列都有一个类名来指定其宽度，列的宽度由其占据的列数来决定，最多可以占据12列。
列的使用方法如下：
<div class="col-md-4">1/3</div>
3. 列的类名
Bootstrap提供了多个类名来控制列的宽度，这些类名大多数是由"col-"开头的。
3.1 col-xs-*和col-sm-*
col-xs-*和col-sm-*是用来控制在小屏幕和中等屏幕下的列宽度的。在小屏幕下，列的宽度会自动填满整个屏幕，而在中等屏幕下，列的宽度会自动平分为12份。
col-xs-*和col-sm-*的使用方法如下：
<div class="col-xs-12 col-sm-6">1/2</div>
<div class="col-xs-12 col-sm-6">1/2</div>
上面的代码表示，在小屏幕下，两个列的宽度分别为12列和12列，而在中等屏幕下，两个列的宽度平分为6列。
3.2 col-md-*
col-md-*是用来控制在大屏幕下的列宽度。在大屏幕下，列的宽度也会自动平分为12份。通常，col-md-*比col-xs-*和col-sm-*具有更大的宽度。
col-md-*的使用方法如下：
<div class="col-md-6">1/2</div>
<div class="col-md-6">1/2</div>
上面的代码表示，在大屏幕下，两个列的宽度分别平分为6列。
4. 列的偏移
除了控制列的宽度之外，Bootstrap还提供了一系列的类名来控制列之间的间距。这些类名由"col-*-offset-*"组成，其中星号表示屏幕大小和列数。这些类名可以用来在列之间创建空间和间隔。
4.1 col-xs-offset-*和col-sm-offset-*
col-xs-offset-*和col-sm-offset-*是用来控制在小屏幕和中等屏幕下的列偏移的。在小屏幕下，列之间的间距会自动填满整个屏幕，而在中等屏幕下，列之间的间距会自动平分为12份。
col-xs-offset-*和col-sm-offset-*的使用方法如下：
<div class="col-xs-12 col-sm-6 col-sm-offset-3">1/2</div>
上面的代码表示，在小屏幕下，列的宽度为12列，而在中等屏幕下，列的宽度平分为6列，并且列被偏移了3列的位置。
4.2 col-md-offset-*
col-md-offset-*是用来控制在大屏幕下的列偏移的。在大屏幕下，列之间的间距会自动平分为12份。
col-md-offset-*的使用方法如下：
<div class="col-md-6 col-md-offset-3">1/2</div>
上面的代码表示，在大屏幕下，列的宽度平分为6列，并且列被偏移了3列的位置。
5. 列的排序
除了控制列的宽度和偏移之外，Bootstrap还提供了一系列的类名来控制列的排序。这些类名由"col-*-push-*"和"col-*-pull-*"组成，其中星号表示屏幕大小和列数。这些类名可以用来在列之间创建空间和间隔。
5.1 col-xs-push-*和col-sm-push-*
col-xs-push-*和col-sm-push-*是用来控制在小屏幕和中等屏幕下的列排序的。在小屏幕下，列之间的排序会自动填满整个屏幕，而在中等屏幕下，列之间的排序会自动平分为12份。
col-xs-push-*和col-sm-push-*的使用方法如下：
<div class="col-xs-12 col-sm-4 col-sm-push-8">1/3</div>
<div class="col-xs-12 col-sm-8 col-sm-pull-4">2/3</div>
上面的代码表示，在小屏幕下，第一个列的宽度为12列，第二个列的宽度为12列。而在中等屏幕下，第一个列的宽度为4列，第二个列的宽度为8列，并且第一个列向右偏移了8列的位置。
5.2 col-md-push-*
col-md-push-*是用来控制在大屏幕下的列排序的。在大屏幕下，列之间的排序会自动平分为12份。
col-md-push-*的使用方法如下：
<div class="col-md-4 col-md-push-8">1/3</div>
<div class="col-md-8 col-md-pull-4">2/3</div>
上面的代码表示，在大屏幕下，第一个列的宽度为4列，第二个列的宽度为8列，并且第一个列向右偏移了8列的位置。
6. 总结
Bootstrap的网格系统是一套用于创建响应式布局的工具，它可以让开发者轻松地将一个页面布置为12列，使用这些列可以实现各种不同的布局。Bootstrap的网格系统由容器、行和列三个要素组成，而且每一行最多可以包含12个列。开发者可以使用列的类名来控制列的宽度、偏移和排序。