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 col-md-6 col-md-4 .col-md-4 我的里面嵌套了一个网格 col-md-4 col-md-4 col-md-4 【本文来源于网络，文章内容不代表作者看法，如有侵权，添加微信号：seashen6】
推荐阅读
本文由一位拥有6年Android开发经验的工程师撰写，详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ...
[详细]
蜡笔小新 2024-12-26 17:45:48
本文深入探讨了Kubernetes集群的架构和核心对象，详细介绍了Pod、Service、Volume等基本组件，以及更高层次的抽象如Deployment、StatefulSet等，帮助读者全面理解Kubernetes的工作原理。 ...
[详细]
蜡笔小新 2024-12-26 14:15:32
本文详细介绍了Hadoop的基础知识及其核心组件，包括HDFS、MapReduce和YARN。通过本文，读者可以全面了解Hadoop的生态系统及应用场景。 ...
[详细]
蜡笔小新 2024-12-26 13:12:48
本文详细探讨了Java中StringBuffer类在不同情况下的扩容规则，包括空参构造、带初始字符串和指定初始容量的构造方法。通过实例代码和理论分析，帮助读者更好地理解StringBuffer的内部工作原理。 ...
[详细]
蜡笔小新 2024-12-26 12:28:05
本文探讨了领域驱动设计（DDD）的核心概念、应用场景及其实现方式，详细介绍了其在企业级软件开发中的优势和挑战。通过对比事务脚本与领域模型，展示了DDD如何提升系统的可维护性和扩展性。 ...
[详细]
蜡笔小新 2024-12-25 18:45:55
SplitContainer 控件是 Windows 窗体中的一种复合控件，由两个可调整大小的面板和一个可移动的拆分条组成。本文将详细介绍其功能、属性以及如何通过编程方式创建复杂的用户界面。 ...
[详细]
蜡笔小新 2024-12-25 17:20:08
实体映射最强工具类：MapStruct真香 ...
[详细]
蜡笔小新 2024-12-25 16:22:17
本文详细介绍了 Apache Shiro，一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作，使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API，同时确保高度的安全性和灵活性。 ...
[详细]
蜡笔小新 2024-12-25 16:03:57
本文探讨了在Linux系统上使用Docker时，通过volume将主机上的HTML5文件挂载到容器内部指定目录时遇到的403错误，并提供了解决方案和详细的操作步骤。 ...
[详细]
蜡笔小新 2024-12-25 14:54:50
探讨如何真正掌握Java EE，包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法，并提供了详尽的标准。 ...
[详细]
蜡笔小新 2024-12-25 13:38:29
作为一名专业的Web前端工程师，掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性，还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范，并提供实用的建议。 ...
[详细]
蜡笔小新 2024-12-25 11:06:17
本文探讨了在 ASP.NET MVC 5 中实现松耦合组件的方法。通过分离关注点，应用程序的各个组件可以更加独立且易于维护和测试。文中详细介绍了依赖项注入（DI）及其在实现松耦合中的作用。 ...
[详细]
蜡笔小新 2024-12-25 09:14:49
本文详细介绍了如何解决在全新Mac上搭建iOS自动化环境时，执行sh ./Scripts/bootstrap.shd命令出现的“xcrun: error: unable to find utility “simctl”, not a developer tool or in PATH”错误。该问题通常是由于缺少必要的开发工具或环境变量配置不正确引起的。 ...
[详细]
蜡笔小新 2024-12-25 05:20:04
Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类，按照约定命名为 Startup。 Startup 类：可选择性地包括 ...
[详细]
蜡笔小新 2024-12-25 02:13:25
本文详细记录了网易严选Java开发岗位的面试经验，特别针对MySQL索引相关的技术问题进行了深入探讨。通过本文，读者可以了解面试官常问的索引问题及其背后的原理。 ...
[详细]
蜡笔小新 2024-12-24 19:50:16
我的灵魂在黑夜P里徘回
这个家伙很懒，什么也没留下！
京公网安备 11010802041100号