，随着时间的推移，具有新屏幕尺寸的新设备正在涌现-作为web开发人员，我们需要创建能够响应这些不同屏幕尺寸的web应用程序。有多种方法可以创建一个响应式布局，但是我发现引导网格布局是最简单的。在这篇文章中，我们将通过各种示例介绍Bootstrap网格系统的各个方面。首先，让我们为Bootstrap网格系统中的中型设备创建一个四等列布局。4相等列布局要创建布局，您需要完成以下步骤:

1.创建一个div类容器为固定宽度或容器流体为屏幕的全宽

2.使用类行创建一个div。类行的Div必须在容器内

3.为4列创建4个div。列的Div必须是行div的直接子级

4.内容将在列div内

要在一行中创建四个相等的列，我创建了四个div，类设置为col-md-3，如下面的清单所示:< div 类 = “row”>< div 类 = “col-md-3”><按钮 类= “btn btn-成功”>column1</按钮></div >< div 类 = “col-md-3”> < 按钮 class = “btn btn-info”> column2 </按钮 > ></div >< div 类 = “col-md-3”>< button class = “btn btn-danger”> column3 < button 3 </></div >< div 类 = “col-md-3”> < 按钮 class = “btn btn-warning”> </ 按钮column4 ></div ></div > 引导网格系统将屏幕的可用宽度划分为12列。 要创建四列，我们使用了col-md-3类 (对于中型设备)。3不相等的列布局为了在一行中创建三个不相等的列，我创建了三个div，其类设置为col-md-3、col-md-6和col-md-4，如下所示:< div 类的 = “row”>< div 类 = “col-md-3”> < h2 > 一些文本 </ h2 > ></div >< div 类 = “col-md-6”> < h2 > 一些文本 </ h2 > ></div >< div 类 = “col-md-4”> < h2 > 一些文本 </ h2 > ></div ></div>我们使用类。Col-md-* 创建布局，一个具有相等的列，另一个具有中等设备的不相等的列。对于其他设备，我们还有其他可用的类，我们将在后面的文章中讨论。让我们进一步讨论网格系统的理论概念。Bootstrap网格系统Bootstrap 3.0网格系统的设计考虑了移动。它是响应式的，它为我们提供了为额外的小型设备，小型设备，桌面和额外的大型桌面创建布局的类。为各种设备提供给我们的各种类别如下图所示:Bootstrap网格系统将每种类型的屏幕分为12列。列的宽度取决于屏幕大小，但Bootstrap会考虑各种屏幕大小，其列大小如下: 这12列可以放大或缩小不同的变化，具体取决于屏幕大小，如下所示:我们可以使用下面的列表为中型设备创建上述布局:< div 类 = “container”>< div 类 = “row”>< div 类 = “col-md-1”> col-md-1</div >< div 类 = “col-md-1”> col-md-1</div >< div 类 = “col-md-1”> col-md-1</div >< div 类 = “col-md-1”> col-md-1</div >< div 类 = “col-md-1”> col-md-1</div >< div 类 = “col-md-1”> col-md-1</div >< div 类 = “col-md-1”> col-md-1</div >< div 类 = “col-md-1”> col-md-1</div >< div 类 = “col-md-1”> col-md-1</div >< div 类 = “col-md-1”>col-md-1 </div >< div 类 = “col-md-1”> col-md-1</div >< div 类 = “col-md-1”> col-md-1</div ></div >< div 类 = “row”>< div 类 = “col-md-2”> col-md-2</div >< div 类 = “col-md-2”> col-md-2</div >< div 类 = “col-md-2”> col-md-2</div >< div 类 = “col-md-2”> col-md-2</div >< div 类 = “col-md-2”> col-md-2</div >< div 类 = “col-md-2”> col-md-2</div ></div >< div 类 = “row”>< div 类 = “col-md-3”> col-md-3</div >< div 类 = “col-md-3”> col-md-3</div >< div 类 = “col-md-3”> col-md-3</div >< div 类 = “col-md-3”> col-md-3</div ></div >< div 类 = “row”>< div 类 = “col-md-4”> col-md-4</div >< div 类 = “col-md-4”> col-md-4</div >< div 类 = “col-md-4”> col-md-4</div ></div >< div 类 = “row”>< div 类 = “col-md-6”> col-md-6</div >< div 类 = “col-md-6”>col-md-6 </div ></div ></div >规则使用Bootstrap网格系统使用Bootstrap网格布局，我们需要注意以下几点:

行 · 必须放置在容器 (用于固定宽度) 或container.fluid内 (用于全宽) 以获取正确的填充和对齐。

· 的

列必须是行的直接子列。

内容 · 应放在列内。

·每行有两个可用列。

·如果超过12列被放置在一个单一的行，每一组额外的列将，作为一个单元，换行到一个新的行。

创建介质设备的布局让我们说，我们需要创建介质设备的布局与以下要求·

应该有三列

·第一列的宽度应等于2列的宽度。

·第二列的宽度应等于6列的宽度。

·第三列的宽度应等于4列的宽度。

可以创建此布局，如下面的列表所示:< div 类的 = “container-fluid”>< div 类的 = “row”>< div 类 = “col-md-2”><h2>.col-md-2</h2> < p > < p一些文本 ></div >< div 类 = “col-md-6”><h2>.col-md-6</h2> < p > < p一些文本 ></div >< div 类 = “col-md-4”><h2>.col-md-4</h2> < p > < p一些文本 ></div ></div ></ div > 这将创建一个布局，如下所示: ，如果您不希望使用设备的全部宽度，并希望使用固定宽度，请将row div放在容器类中，如下所示:< div 类的 = “container”>< div 类的 = “row”>< div 类 = “col-md-2”><h2>.col-md-2</h2> < p > < p一些文本 ></div >< div 类 = “col-md-6”><h2>.col-md-6</h2> < p > < p一些文本 ></div >< div 类 = “col-md-4”><h2>.col-md-4</h2> < p > < p一些文本 ></div ></div ></ div > 在这里，布局将被创建，如下图所示，使用固定宽度: ，如果我们将超过12列放在一行中，那么额外的列作为单元将被堆叠到下一行。

创建小型设备的布局让我们说，我们需要创建一个小型设备具有以下要求的布局:·

应该有三列

·第一列的宽度应等于2列的宽度。

·2的宽度^钕应等于6列的宽度。

·第三列的宽度应等于4列的宽度。

可以为小型设备创建此布局，如下面的列表所示:<div 类= “容器-流体”> < div 类 = “row”>< div 类 = “col-sm-2”><h2>.col-sm-2</h2> < p > < p一些文本 ></div >< div 类 = “col-sm-6”><h2>.col-sm-6</h2> < p > < p一些文本 ></div >< div 类 = “col-sm-4”><h2>.col-sm-4</h2> < p > < p一些文本 ></div ></div >，</div > 将为您提供如下图所示的布局。您可能会注意到，第二列的宽度是第一列宽度的三倍。另外，您可能会注意到的另一个重要点是，即使浏览器的宽度减小 (模拟小型设备)，列也不会垂直堆叠。以同样的方式，可以使用类创建大型和超小型设备的布局。col-mg-* 和。列-xs.* 分别。创建平板电脑和台式机的布局我们可以结合col-md-* 类和col-sm-* 类来创建桌面和平板电脑的布局。我们可以创建三个不相等列的布局，如下面的清单所示:< div 类的 = “row”>< div 类 = “col-md-2 col-sm-2”> < h2 > 一些文本 </ h2 > ></div >< div 类 = “col-md-6 col-sm-6”> < h2 > 一些文本 </ h2 > ></div >< div 类 = “col-md-4 col-sm-4”> < h2 > 一些文本 </ h2 > ></div ></div > ，上述创建的布局将响应于中等屏幕尺寸的桌面和平板电脑。创建布局的平板电脑，台式机和移动 ，我们可以结合col-md-* 类，col-xs-*，和col-sm-* 类来创建桌面和平板电脑的布局-让我们看看如何创建三个不相等列的布局，如下面的清单所示:< div 类的 = “row”>< div 类 = “col-md-2 col-sm-2 col-xs-2”> < h2 > 一些文本 </ h2 > ></div >< div 类 = “col-md-6 col-sm-6 col-xs-6”> < h2 > 一些文本 </ h2 > ></div >< div 类 = “col-md-4 col-sm-4 col-xs-4”> < h2 > 一些文本 </ h2 > ></div > </div > 以上创建的布局将响应于中等屏幕尺寸的台式机，移动设备和平板电脑。嵌套列也允许嵌套列，这意味着我们可以将行和列放在现有列中。请记住，即使在嵌套中，同一行中总列的总和也不应大于12。 为了更好地理解这一点，让我们考虑以下场景:

·有一排。

·行中有两列。

·第一列是类col-md-4。

·第二列是类col-md-8。

·第一列内有一个嵌套列。

在这里，嵌套列的最大数量将是col-md-4内的12。超过12列将堆叠到第一列中的下一行。 让我们考虑下面的列表，其中我们保留了12个以上的嵌套列。< div 类的 = “row”>< div 类 = “col-md-4”>< div 类 = “row”>< div 类 = “col-md-2”> < h2 > 文本 </h2 > ></div >< div 类 = “col-md-2”> < h2 > 文本 </h2 > ></div >< div 类 = “col-md-2”> < h2 > 文本 </h2 > ></div >< div 类 = “col-md-2”> < h2 > 文本 </h2 > ></div >< div 类 = “col-md-2”> < h2 > 文本 </h2 > ></div >< div 类 = “col-md-2”> < h2 > 文本 </h2 > ></div >< div 类 = “col-md-2”> < h2 > 文本 </h2 > ></div >< div 类 = “col-md-2”> < h2 > 文本 </h2 > ></div ></div ></div >< div 类 = “col-md-8”><h1>我是水平-col-md-8</h1></div > 这里的 </div > ，我们在主行的第一列中放置了超过12个嵌套列。额外的嵌套列将堆叠到下一行，如下图所示:列偏移Bootstrap允许我们使用类.col-md-offset-* 将列向右移动。所以让我们说我们想将一列向右移动4列，那么我们将不得不使用类col-md-offset-4。这可以如下面的清单所示:< div 类的 = “row”>< div 类 = “col-md-5 col-md-offset-4”> < h2 > 右移了4列 </h2 ></div >< div 类 = “col-md-3”>< h2 > </ h2 md-3 ></div ></div >然后显示偏移列，如下图所示:列推和拉的引导还允许我们重新排序列，太。我们可以使用col-md-push-* 或col-md-pull-* 类来做到这一点:< div 类的 = “row”>< div class col-md-9 col-md-push-3 </div > = “col-md-9 col-md-push-3”><div 类= “col-md-3 col-md-pull-9”>col-md-3 col-md-pull-9</div></div>在这里，第一列将由3列向右推，第二列将被拉向9列向左，如下所示:结论正如我们所演示的，您可以使用Bootstrap提供的各种类为您的web应用程序创建响应式布局。在这篇文章中，我们重点介绍了行和列类以及偏移、推、拉和嵌套列。我希望你觉得这篇文章有用，并感谢您的阅读!使用您喜欢的框架为任何场景创建现代Web应用程序。下载Ignite UI今天体验一下Infragistics jQuery控件的强大功能。 </span