-
前言
在前一篇文章中，我们主要通过一个简单的案例学习了网格系统的基本原理和原理的实践。
然后，本文的主要内容将分为以下几个部分
1。网格选项
2。从堆叠到水平排列
三.移动设备和台式机
4、响应列重置
5。列偏移量
6。嵌套列
7。列排序
8。总结
网格选项
下面的截图可以清楚地展示自举网格系统在各种移动设备上的工作原理。
从上面的截图，我们可以看到，引导有不同大小的屏幕设置不同的风格，包括手机、平板电脑、PC等，使开发人员可以有更多的选择在发展。根据我的理解：如果多个不同的款式上使用的一个元素，该元素将选择最合适的（最佳匹配）风格类根据不同的大小。一个简单的例子说明：例如，我们使用了两个样式类一元：。Col MD - and.col-lg.it可以从上面的截图中看到
第一种情况：大小= 1200px；then.col-lg将选择。
第二例：大小= 992px 和= 1200px ；然后你会choose.col-md。
在第三种情况下，如果大小992px ；那么这两类不工作的元素。
从堆叠到水平排列
在网格选项四风格类的使用是基于。排课，排课的，通常是在the.container进行。
复制代码代码如下所示：
它是在适当的容器中使用适当的样式类。
使用一组。Col MD -网格类单，你可以创建一个基本的网格系统，手机和平板是叠在一起的（超小的屏幕，在这个范围内的小屏幕），在桌面上（中）屏幕设备成水平布置，将管柱（柱* *在any.row）。
复制代码代码如下所示：
从堆垛到水平排列
col-md-1。
col-md-1。
col-md-1。
col-md-1。
col-md-1。
col-md-1。
col-md-1。
col-md-1。
col-md-1。
col-md-1。
col-md-1。
col-md-1。
col-md-8。
col-md-4。
col-md-4。
col-md-4。
col-md-4。
col-md-6。
col-md-6。
通过控制浏览器的宽度，可以查看堆叠和水平排列的效果。
很明显，这是堆叠的效果，即当浏览器的宽度被转移到一个较小的。
现在是水平排列。把浏览器的宽度调整到稍微宽一点的范围。你还可以使用其他三个类来测试结果。
移动设备和台式机
从上述案例中，我们可以看到，当一个小的屏幕，它会显示在使用堆栈状态。Col MD - *，因此开发商有时会需要小尺寸屏幕显示和横向排列。所以我们。Col X *（小于的768px屏幕样式类）是有用的。
复制代码代码如下所示：
案例：移动设备和台式机
col-xs-12.col-md-8。
col-xs-6.col-md-4。
col-xs-6.col-md-4。
col-xs-6.col-md-4。
col-xs-6.col-md-4。
col-xs-6。
col-xs-6。
我们可以通过代码找到前两行样式类中的div，并在每个元素上设置两个样式类。
这是在稍大的屏幕上显示的效果。对于每个元素，两种样式将根据不同的大小适当地选择。在稍大一点的情况下，所选样式类将为。
所以：
第一行：8和4的比例。
第二行：三个4级的平均分为三个部分。
第三行：6和6，虽然它们是大尺寸的，因为只有这一条，平均分为两部分。
现在，当页面屏幕小于一定程度，风格类重新选择的每个元素。现在确实Col X *的第一two.row。
所以：
第一行：这两个元素分为12和6，一行是12，所以第二个元素将被改变，然后占据6个位置中的一半。
第二行：3。6，一行是12，所以第三个元素将被改变，然后占据6个公共位置。
反应柱复位
通过对以上两种情况的分析，可以通过四个网格类轻松地设计更复杂的页面布局，但在某些情况下，仍然会出现一列高于其他列的行。
复制代码代码如下所示：
案例：响应列重置
。col-xs-6.col-sm-3（调整宽度的浏览器或手机上，你可以看到这些案件的实际效果。）
col-xs-6.col-sm-3。
col-xs-6.col-sm-3。
col-xs-6.col-sm-3。
首先，看看页面显示在大屏幕上的效果。
第一个元素的高度不太一样，然后看看小屏幕。
看起来这是安排这种方式，因为小屏幕的选择是所有。Col X *的风格，它占了6份。我不知道这种效果是你想要的。你想看到的两线四元素，然后在一个小屏幕上每两线元素
然后我们稍微修改了代码，事实上，我们添加了一行代码。
复制代码代码如下所示：
案例：响应列重置
。col-xs-6.col-sm-3（调整宽度的浏览器或手机上，你可以看到这些案件的实际效果。）
col-xs-6.col-sm-3。
col-xs-6.col-sm-3。
col-xs-6.col-sm-3。
这个效果仍然是两行和两列。当然，你也可以使用一个响应工具，稍后会详细解释，目前还没有样本的演示。
列偏移量
事实上，这仅仅是通过一个类可以移动到右侧，Col MD抵消*。这些类中添加列到列的左边缘用*选择器。例如，移动。col-md-offset-4 the.col-md-4到4列的宽度的权利。
复制代码代码如下所示：
案例：列迁移
col-md-4。
col-md-4.col-md-offset-4。
col-md-3.col-md-offset-3。
col-md-3.col-md-offset-3。
col-md-6.col-md-offset-3。
您可以通过读取上面的代码来想象布局的布局。
嵌套列
为了使用内置的内容网格嵌套，通过向现有添加一个新的行和一个系列的列，可以实现多个列。嵌套的列包含更多的应该等于12。
复制代码代码如下所示：
情况：列嵌套
1级：。col-md-9
2级：。col-md-6
2级：。col-md-6
3级：。col-md-3
3级：。col-md-6
From the above code, you can find that a row is first defined, and then a column of.Col-md-9 is added to the row, representing the 9 column of the element.
然后在包含9列的元素中添加两个不同的行。
也就是说，第一行：将第一行分成两部分，每个列占据6列，12列，但总宽度与其他9个元素的宽度相同。
第二行：把第二行分成两个，第一个3，第二个6，剩下的3。
列排序
对中文网络的解释是，可以通过使用列推和*来轻松地改变列序列。
通过代码，看到结果，我还是不明白这句话的理解。
复制代码代码如下所示：
情况：列嵌套
col-md-4。
col-md-4。
col-md-4。
col-md-2.col-md-push-4。
col-md-5.col-md-push-4。
正如你所看到的，我已经定义了三行。
第一行分为三个部分，每个部分为四个，这一行主要与下面两行进行比较。
第二行是只有一个元素占两列，那么这个元素也加入a.col-md-push-4样式类。（让两列4列元素移动到正确的现在占据第五列和第六列。）
第三柱分为两个部分，第一个占七列，但它是空的，然后第二部分占五列，这个元素也增加了a.col-md-pull-4风格类。当然，这个类和前一行上的附加类应该有相反的效果。（5列中的元素向左移四列，从第八列开始，现在从第四列开始）。
现在看看效果显示
总结
本文通过简单的案例来分析布局点涉及此案。这一下来，我感觉很多，就像你需要看一遍。有些地方的理解可能不到位，理解，看丹尼尔可以帮助纠正我哥哥的前辈感谢你，在这第一个兄弟。完成这一个我感觉很好，学到了很多，当然，也希望能对你有一些帮助。