bootstrap中的网格系统
作者：我的灵魂在黑夜P里徘回 | 来源：互联网 | 2023-05-17 03:21
实现原理网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。B
实现原理
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）。
.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-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-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
工作原理
Bootstrap框架的网格系统工作原理如下：
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
1、最外边框，带有一大片白色区域，就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果，其带有四种类型的浏览器（超小屏，小屏，中屏和大屏），其断点（像素的分界点）是768px、992px和1220px。
2、第二个边框(1)相当于容器(.container)。针对不同的浏览器分辨率，其宽度也不一样：自动、750px、970px和1170px。在bootstrap.css的第736行～第756行进行设置：
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; @media (min-width: 768px) { .container { width: 750px; } @media (min-width: 992px) { .container { width: 970px; } @media (min-width: 1200px) { .container { width: 1170px; }3、２号横条阐述的是，将容器的行（.row）平分了12等份，也就是列。每个列都有一个“padding-left:15px”(图中粉红色部分)和一个“padding-right:15px”(图中紫色部分)。这样也导致了第一个列的padding-left和最后一列的padding-right占据了总宽度的30px，从而致使页面不美观，当然，如果你需要留有一定的间距，这个做法是不错的。如bootstrap.css中第767行~第772行所示：
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;4、３号横条就是行容器(.row),其定义了“margin-left”和”margin-right”值为”-15px”，用来抵消第一个列的左内距和最后一列的右内距。在bootstrap.css的第763行~第767行可以看到：
.row { margin-right: -15px; margin-left: -15px;5、将行与列给合在一起就能看到横条4的效果。也就是我们期望看到的效果，第一列和最后一列与容器（.container）之间没有间距。
横条５只是想向大家展示，你可以根据需要，任意组合列与列，只是他们的组合数之和不要超过总列数。
.col-md-4
.col-md-4
.col-md-4
.col-md-3
.col-md-6
.col-md-3
基本用法
网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式，在这一节中所涉及到的示例，我们都以中屏（970px）为例进行介绍，其他屏幕的使用也类似这一种。关于屏幕尺寸如下图：
1、列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性，例如：
.col-md-4 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-3 .col-md-6 .col-md-3
(在右侧结果窗口中查看时需要设置为全屏)
实现列组合方式非常简单，只涉及两个CSS两个特性：浮动与宽度百分比。在bootstrap.css文件的第1088行～1126行：
/*确保所有列左浮动*/
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }/*定义每个列组合的宽度（使用的百分比）*/
.col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; }列偏移
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。
.col-md-4列向右移动四列的间距.col-md-3.col-md-4列向右移动四列的间距
如上面的示例代码，得到的效果如下或在最右侧结果窗口中可以看到(鼠标移到结果窗口，单击出现的全屏按钮):
实现原理非常简单，就是利用十二分之一（1/12）的margin-left。然后有多少个offset，就有多少个margin-left。在bootstrap.css中第1205行～1241行所示：
.col-md-offset-12 { margin-left: 100%;} .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; }注意：
不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示，如：
.col-md-3 col-md-offset-3 col-md-4
上面代码中列和偏移列总数为3+3+3+4 = 13>12，所以发生了列断行。
列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
我们来看一个简单的示例：
.col-md-4 .col-md-8
默认情况之下，上面的代码效果如下：
“col-md-4”居左，“col-md-8”居右，如果要互换位置，需要将“col-md-4”向右移动８个列的距离，也就是8个offset ,也就是在“
”添加类名“col-md-push-8”，调用其样式。
也要将“col-md-8”向左移动４个列的距离，也就是4个offset，在“
”上添加类名“col-md-pull-4”：
Bootstrap仅通过设置left和right来实现定位效果。在boostrap.css文件的第1127行~第1204行可以看到具体的代码：
.col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: 0; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: 0; }列的嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。来看一个简单示例：
我的里面嵌套了一个网格 col-md-6
【本文来源于网络，文章内容不代表作者看法，如有侵权，添加微信号：seashen6】
推荐阅读
-
最新研究表明，胡蜂具备一定的逻辑推理能力，能够进行传递性推理。研究人员通过实验发现，胡蜂在避免电击的测试中，能够正确选择符合逻辑的选项。这项研究成果对于了解无脊椎动物的认知能力具有重要意义，也为解析胡蜂社会结构的进化提供了线索。 ...
[详细]
蜡笔小新 2023-12-14 14:05:05
-
阿,里,云,物,联网,net,core,客户端,czgl,aliiotclient, ...
[详细]
蜡笔小新 2023-12-14 12:40:20
-
-
本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍，以及getBeansOfType方法的应用，解决了在实际工作中遇到的接口及多个实现类的问题。同时，文章还提到了SPI使用的不便之处，并介绍了借助ApplicationContext实现需求的方法。阅读本文，你将了解到Spring特性的实现原理和实际应用方式。 ...
[详细]
蜡笔小新 2023-12-14 03:24:19
-
本文介绍了在运行docker容器时如何添加参数来保证每次docker服务重启后容器也自动重启的方法，以及如何使用命令来更新已启动的容器。 ...
[详细]
蜡笔小新 2023-12-14 03:04:27
-
本文介绍了Hyperledger Fabric外部链码构建与运行的相关知识，包括在Hyperledger Fabric 2.0版本之前链码构建和运行的困难性，外部构建模式的实现原理以及外部构建和运行API的使用方法。通过本文的介绍，读者可以了解到如何利用外部构建和运行的方式来实现链码的构建和运行，并且不再受限于特定的语言和部署环境。 ...
[详细]
蜡笔小新 2023-12-13 21:47:39
-
本文介绍了处理docker容器时间和宿主机时间不一致问题的方法，包括复制主机的localtime到容器、处理报错情况以及重启容器的步骤。通过这些方法，可以解决docker容器时间和宿主机时间不一致的问题。 ...
[详细]
蜡笔小新 2023-12-13 18:55:18
-
本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ...
[详细]
蜡笔小新 2023-12-13 17:08:24
-
本文探讨了Tomcat和Jetty选择扩展线程池而不是使用JDK原生线程池的原因。通过比较IO密集型任务和CPU密集型任务的特点，解释了为何Tomcat和Jetty需要扩展线程池来提高并发度和任务处理速度。同时，介绍了JDK原生线程池的工作流程。 ...
[详细]
蜡笔小新 2023-12-13 16:18:09
-
本文介绍了Java的集合及其实现类，包括数据结构、抽象类和具体实现类的关系，详细介绍了List接口及其实现类ArrayList的基本操作和特点。文章通过提供相关参考文档和链接，帮助读者更好地理解和使用Java的集合类。 ...
[详细]
蜡笔小新 2023-12-13 14:12:18
-
本文介绍了电流源并联合并的方法，以及谐振电路的原理。谐振电路具有很强的选频能力，通过将电感和电容连接在一起，电流和电压会产生震荡。谐振频率的大小取决于电感和电容的大小，而电路中的电阻会逐渐降低震荡的幅度。电阻和电容组成的电路中，当电容放完电后，电阻两端的电压为0，电流不再流过电容。然而，电感是一种特殊的器件，当有电流流过时，线圈会产生感应磁场，阻止电流的流动，从而使电流不会减小。 ...
[详细]
蜡笔小新 2023-12-13 12:49:32
-
蜡笔小新 2023-12-13 11:03:10
-
本文详细介绍了单点登录的原理及实现方案，其中包括共享Session的方式，以及基于Redis的Session共享方案。同时，还分享了作者在应用环境中所遇到的问题和经验，希望对读者有所帮助。 ...
[详细]
蜡笔小新 2023-12-12 19:23:28
-
本文介绍了在Docker容器技术中限制容器对CPU的使用的方法，包括使用-c参数设置容器的内存限额，以及通过设置工作线程数量来充分利用CPU资源。同时，还介绍了容器权重分配的情况，以及如何通过top命令查看容器在CPU资源紧张情况下的使用情况。 ...
[详细]
蜡笔小新 2023-12-12 18:31:07
-
本文介绍了Java中集合的遍历方式，重点介绍了for-each语句的用法和优势。同时指出了for-each语句无法引用数组或集合的索引的局限性。通过示例代码展示了for-each语句的使用方法，并提供了改写为for语句版本的方法。 ...
[详细]
蜡笔小新 2023-12-12 15:34:14
-
本文详细介绍了Python中使用SQLAlchemy库的方法。首先对SQLAlchemy进行了简介，包括其定义、适用的数据库类型等。然后讨论了SQLAlchemy提供的两种主要使用模式，即SQL表达式语言和ORM。针对不同的需求，给出了选择哪种模式的建议。最后，介绍了连接数据库的方法，包括创建SQLAlchemy引擎和执行SQL语句的接口。 ...
[详细]
蜡笔小新 2023-12-12 15:23:06
-
我的灵魂在黑夜P里徘回
这个家伙很懒，什么也没留下！
京公网安备 11010802041100号