Bootstrap之栅格系统(bootstrap的栅格系统)
bootstrap是什么
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
为什么使用bootstrap
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。
bootstrap有什么内容？
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
栅格系统
什么是bootstrap栅格系统
Bootstrap 官方文档中有关网格系统的描述：
伪原创工具 SEO网站优化 https://www.237it.com/
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title></title> <style> .row div{ height: 100px; background: green; border: 1px solid #000; color: #fff; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xl-1">第1列</div> <div class="col-xl-1">第2列</div> <div class="col-xl-1">第3列</div> <div class="col-xl-1">第4列</div> <div class="col-xl-1">第5列</div> <div class="col-xl-1">第6列</div> <div class="col-xl-1">第7列</div> <div class="col-xl-1">第8列</div> <div class="col-xl-1">第9列</div> <div class="col-xl-1">第10列</div> <div class="col-xl-1">第11列</div> <div class="col-xl-1">第12列</div> </div> <div class="row"> <div class="col-xl-2">占2列</div> <div class="col-xl-7">占7列</div> <div class="col-xl-1">占1列</div> <div class="col-xl-2">占2列</div> </div> <div class="row"> <div class="col-xl-10">占10列</div> <div class="col-xl-2">占2列</div> </div> <div class="row"> <div class="col-xl-12">占12列</div> </div> <div class="row"> <div class="col-xl-6">占6列</div> <div class="col-xl-8">占8列</div> </div> <div class="row"> <div class="col-xl-15">占15列</div> </div> </div> </body> </html> 复制代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title></title> <style> body{ padding-bottom: 1000px; } .row div{ height: 100px; background: green; border: 1px solid #000; color: #fff; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-xl-3">xl为超大屏。屏幕宽度>=1200，容器的宽度固定为1140px，一行可以设置12个列。屏幕尺寸<1200的时候，一行只能设置1列</div> <div class="col-xl-3"></div> <div class="col-xl-3"></div> <div class="col-xl-3"></div> </div> <div class="row mt-5"> <div class="col-lg-4">lg为大屏。屏幕宽度>=992px，容器的宽度固定为960px，一行可以设置12个列。屏幕尺寸<992的时候，一行只能设置1列</div> <div class="col-lg-4"></div> <div class="col-lg-4"></div> </div> <div class="row mt-5"> <div class="col-md-6">md为中等屏。屏幕宽度>=768px，容器的宽度固定为720px，一行可以设置12个列。屏幕尺寸<768的时候，一行只能设置1列</div> <div class="col-md-6"></div> </div> <div class="row mt-5"> <div class="col-sm-3">sm为小屏。屏幕宽度>=576px，容器的宽度固定为540px，一行可以设置12个列。屏幕尺寸<576的时候，一行只能设置1列</div> <div class="col-sm-3"></div> <div class="col-sm-3"></div> <div class="col-sm-3"></div> </div> <div class="row mt-5"> <div class="col-4">col为超小屏。屏幕宽度<576px，容器的宽度为auto，一行永远可以设置12列</div> <div class="col-4"></div> <div class="col-4"></div> </div> <!-- 设置等宽列，平分宽度，通过.col的class去设置 --> <div class="row mt-5"> <div class="col">等宽列</div> <div class="col">等宽列</div> <div class="col">等宽列</div> <div class="col">等宽列</div> <div class="col">等宽列</div> <div class="col">等宽列</div> <div class="col">等宽列</div> </div> <!-- 设置多行等宽列，在希望断开的地方添加一个.w-100的class，能够让后面的列换行 --> <div class="row mt-5"> <div class="col">等宽列1</div> <div class="col">等宽列2</div> <div class="w-100" style="height: auto;border: none;"></div> <div class="col">等宽列3</div> <div class="col">等宽列4</div> </div> </div> </body> </html> 复制代码Bootstrap 网格系统（Grid System）的工作原理
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
作者：漆黑之牙_
链接：https://juejin.cn/post/7035208656270393374