Bootstrap网格系统

最后更新于:2022-04-01 11:55:23

**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 的类,并使用它们** 效果如下图所示(大型设备): ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-07_570603f24a5f2.jpg) ### 偏移列 **.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个列(大型设备) 效果如下: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-07_570603f25ddd6.jpg) 入了设置class为row外,我们也可以设置col-lg-8,其它内容不变,效果如下:![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-07_570603f271a58.jpg) ### 嵌套列 看懂下面的例子,对于这部分内容,对于列嵌套,你就能理解了。 ~~~ <!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> ~~~ 效果如下: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-07_570603f285b8b.jpg) 说明如下: <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> ~~~ 效果如下: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-04-07_570603f2a42bb.jpg) 可以看出来,原本在左侧的内容展示到了右侧,而原本在右侧的内容,现在在左侧展示了。 看到col-lg-push-和col-lg-pull-后的数值了吗?起后的值,对应着你要存放过去的内容的值。4对应着要右侧要显示过来的内容的宽度,3对应着要从左侧显示过来的宽度。 关于Bootstrap网格系统就介绍这么多,看完之后,希望您自己能脱离本文或其它文档,自己进行练习。
';