Bootstrap网格系统

**Bootstrap 官方文档中有关网格系统的描述：** Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。 Bootstrap3是移动设备优先的，也就是Bootstrap代码从小屏幕设备开始，然后扩展到大屏幕上的组件和网格。 ###移动设备优先策略 内容：决定什么是最重要的 布局：优先设计更小的宽度，基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑 渐进增强：随着屏幕大小的增加而添加元素 Bootstrap的网格系统会随着屏幕尺寸的增加，自动分为最多12列。 <table border="1" cellpadding="2" cellspacing="0" style=""><tbody style="background-color:inherit"><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">1</span></strong></td></tr><tr style="background-color:inherit"><td colspan="4" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">4</span></strong></td><td colspan="4" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">4</span></strong></td><td colspan="4" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">4</span></strong></td></tr><tr style="background-color:inherit"><td colspan="4" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">4</span></strong></td><td colspan="8" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">8</span></strong></td></tr><tr style="background-color:inherit"><td colspan="6" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">6</span></strong></td><td colspan="6" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">6</span></strong></td></tr><tr style="background-color:inherit"><td colspan="12" style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:29.449987792968727px; background-color:inherit"><strong><span style="background-color:rgb(215,227,188)">12</span></strong></td></tr></tbody></table> ### Bootstrap 网格系统（Grid System）的工作原理 - 行必须放置在 **.container** class 内，以便获得适当的对齐（alignment）和内边距（padding）。 - 使用行来创建列的水平组。 - 内容应该放置在列内，且唯有列可以是行的直接子元素。 - 预定义的网格类，比如 **.row** 和 **.col-sm-6**，可用于快速创建网格布局（row相当于是12列）。 - 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 **.rows** 上的外边距（margin）取负，表示第一列和最后一列的行偏移。 - 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 **.col-md-4** ### 媒体查询 媒体查询是"有条件的 CSS 规则"。它适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式. ### 网格选项 <table border="1" cellpadding="2" cellspacing="0" style=""><tbody style="background-color:inherit"><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:47.10000000000002px; background-color:inherit; width:69.39999999999998px"><div style="min-width:2px; background-color:inherit"><span style="background-color:rgb(215,227,188)"><br style="background-color:inherit"/></span></div></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:47.10000000000002px; background-color:inherit; width:89.4000183105469px"><div style="min-width:2px; background-color:inherit"><span style="background-color:rgb(215,227,188)"><span style="font-family:微软雅黑; color:#000000; background-color:inherit; font-size:14.399999618530273px; font-style:normal; font-weight:bold; text-align:center">超小设备手机（&lt;768px）</span><br style="background-color:inherit"/></span></div></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:47.10000000000002px; background-color:inherit; width:121.40000610351558px"><div style="min-width:2px; background-color:inherit"><span style="background-color:rgb(215,227,188)"><span style="font-family:微软雅黑; color:#000000; background-color:inherit; font-size:14.399999618530273px; font-style:normal; font-weight:bold; text-align:center">小型设备平板电脑（≥768px）</span><br style="background-color:inherit"/></span></div></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:47.10000000000002px; background-color:inherit; width:122.99996337890627px"><div style="min-width:2px; background-color:inherit"><span style="background-color:rgb(215,227,188)"><span style="font-family:微软雅黑; color:#000000; background-color:inherit; font-size:14.399999618530273px; font-style:normal; font-weight:bold; text-align:center">中型设备台式电脑（≥992px）</span><br style="background-color:inherit"/></span></div></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:47.10000000000002px; background-color:inherit; width:117.39998779296877px"><div style="min-width:2px; background-color:inherit"><span style="font-family:微软雅黑; color:#000000; background-color:rgb(215,227,188); font-size:14.399999618530273px; font-style:normal; font-weight:bold; text-align:center">大型设备台式电脑（≥1200px）</span><br style="background-color:inherit"/></div></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">网格行为</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">一直是水平的</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">以折叠开始，断点以上是水平的</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">以折叠开始，断点以上是水平的</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">以折叠开始，断点以上是水平的</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:55.68749491373694px; background-color:inherit; width:69.39999999999998px">最大容器宽度</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:55.68749491373694px; background-color:inherit; width:89.4000183105469px">None (auto)</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:55.68749491373694px; background-color:inherit; width:121.40000610351558px">750px</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:55.68749491373694px; background-color:inherit; width:122.99996337890627px">970px</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:55.68749491373694px; background-color:inherit; width:117.39998779296877px">1170px</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">Class 前缀</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px"><strong style="background-color:inherit">.col-xs-</strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px"><strong style="background-color:inherit">.col-sm-</strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px"><strong style="background-color:inherit">.col-md-</strong></td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px"><strong style="background-color:inherit">.col-lg-</strong></td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">列数量和</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">12</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">12</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">12</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">12</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">最大列宽</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">Auto</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">60px</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">78px</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">95px</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">间隙宽度</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">30px<br style="background-color:inherit"/>（一个列的每边分别 15px）</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">30px<br style="background-color:inherit"/>（一个列的每边分别 15px）</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">30px<br style="background-color:inherit"/>（一个列的每边分别 15px）</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">30px<br style="background-color:inherit"/>（一个列的每边分别 15px）</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:28.699981689453125px; background-color:inherit; width:69.39999999999998px">可嵌套</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:28.699981689453125px; background-color:inherit; width:89.4000183105469px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:28.699981689453125px; background-color:inherit; width:121.40000610351558px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:28.699981689453125px; background-color:inherit; width:122.99996337890627px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:28.699981689453125px; background-color:inherit; width:117.39998779296877px">Yes</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">偏移量</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">Yes</td></tr><tr style="background-color:inherit"><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:69.39999999999998px">列排序</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:89.4000183105469px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:121.40000610351558px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:122.99996337890627px">Yes</td><td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 16px 5px 12px; min-height:25px; min-width:25px; height:25px; background-color:inherit; width:117.39998779296877px">Yes</td></tr></tbody></table> **使用：** 堆叠的水平（手机25%/75%分割，中型设备50%/50%分割，大型设备33%/66%分割） ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Bootstrap 实例 - 上下文类</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <div class = "container"> <div class = "row"> <div class = "col-xs-3 col-md-6 col-lg-4" style="border:2px solid green;"> this提供了一种优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。随着使用模式越来越复杂， 显式传递上下文对象会让代码变得混乱，而使用this则不会这样。（this引用的是函数据以执行的环境对象） </div> <div class = "col-xs-9 col-md-6 col-lg-8" style="border:2px solid green;"> 在调用函数时，我们会将调出处执行环境对象传给this，如此处调用fun(2)，处在全局作用域中，因此this会指向window。既然这样， 我们可以通过强制this指向fun函数对象来解决这个问题，JS提供了两个函数，apply()和call()函数.apply()方法接收两个参数： 一个是在其中运行函数的作用域（可以理解为是this的值），另一个是参数数组（可以是arguments或者是数组的实例） call()方法与apply()方法的作用相同，区别仅在于接收参数的方式不同。第一个参数都是this的值， 但是使用call()方法，必须要将传递的参数逐个列举出来。 </div> </div> </div> </body> </html> ~~~ **说明：**Bootstrap 在中型设备中，会查找带有 md 的类，并使用它们。在大型设备中，会查找带有 lg 的类，并使用它们** 效果如下图所示（大型设备）：  ### 偏移列 **.col-xs=**类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。 为了在大屏幕显示器上使用偏移，请使用.col-md-offset-类。这些类会把一个列的左外边距（margin）增加列，其中范围是从1到11。 偏移列实际是指定了margin-left的值。 举例说明： ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Bootstrap 实例 - 上下文类</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <div class = "container"> <div class = "row" style="border:2px solid red;"> <div class = "col-xs-3 col-md-6 col-lg-3 col-lg-offset-3" style="border:2px solid green;"> this提供了一种优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。随着使用模式越来越复杂， 显式传递上下文对象会让代码变得混乱，而使用this则不会这样。（this引用的是函数据以执行的环境对象） </div> </div> </div> </body> </html> ~~~ 上面实现的效果是：偏移3个列（大型设备） 效果如下：  入了设置class为row外，我们也可以设置col-lg-8，其它内容不变，效果如下： ### 嵌套列 看懂下面的例子，对于这部分内容，对于列嵌套，你就能理解了。 ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Bootstrap 实例 - 上下文类</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <div class = "container"> <div class = "row" style="border:2px solid red;"> <div class = "col-lg-3 " style="border:2px solid green;background:#ccc;"> this提供了一种优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。随着使用模式越来越复杂，显式传递上下文对象会让代码变得混乱，而使用this则不会这样。（this引用的是函数据以执行的环境对象） </div> <div class="col-lg-9"> <div class="col-lg-2" style="background: pink;"> 你好吗？会越来越好的，对吗？ </div> <div class="col-lg-2" style="border:2px solid yellow;"> 越努力越幸福 行动起来！ 不要做语言的巨人，行动的矮子 </div> <div class="col-lg-8"> <div class="col-lg-4" style="background:#FFD782;"> 再见2015年 你好2016年 </div> <div class="col-lg-6" style="background:#A8FFE2;"> 愿时光待你温柔一些。 最纠结的时候就是你人生最重要的时候 不要在不安中度过一生 </div> </div> </div> </div> </div> </body> </html> ~~~ 效果如下：  说明如下： <div class="col-lg-9">中将被分为12列 同样<div class="col-lg-8">也是。 每一个分割之后，再进行分割时，其都是被分割为12列（当然，在使用时，您不必用完12列） ### 列排序 Bootstrap 网格系统另一个完美的特性，就是可以很容易地以一种顺序编写列，然后以另一种顺序显示列。可以很轻易地改变带有.col-md-push-和.col-md-pull-类的内置网格列的顺序，其中范围是从1到11。当我们需要调整左右的布局顺序时，这种特性能起到非常巨大的作用。 ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Bootstrap 实例 - 上下文类</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <div class = "container"> <div class = "row"> <div class = "col-lg-3 col-lg-push-4" style="background:#A3FF93;"> <h2>我原本在左边</h2> this提供了一种优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。随着使用模式越来越复杂，显式传递上下文对象会让代码变得混乱，而使用this则不会这样。（this引用的是函数据以执行的环境对象） </div> <div class="col-lg-4 col-lg-pull-3" style="background:#FFAEF6;"> <h2>我原本在右边</h2> 越努力越幸福<br/> 行动起来！<br/> 不要做语言的巨人，行动的矮子<br/> 愿时光待你温柔一些。<br/> 最纠结的时候就是你人生最重要的时候<br/> 不要在不安中度过一生 <br/> 你生命中的大事<br/> 安心做一件事<br/> 你成为哪种人，并不取决于你的能力，而取决于你的选择 </div> </div> </div> </body> </html> ~~~ 效果如下：  可以看出来，原本在左侧的内容展示到了右侧，而原本在右侧的内容，现在在左侧展示了。 看到col-lg-push-和col-lg-pull-后的数值了吗？起后的值，对应着你要存放过去的内容的值。4对应着要右侧要显示过来的内容的宽度，3对应着要从左侧显示过来的宽度。 关于Bootstrap网格系统就介绍这么多，看完之后，希望您自己能脱离本文或其它文档，自己进行练习。