【前端】Bootstrap：栅格体系 (Grid System)

Bootstrap的栅格体系是该框架的核心部分之一，可以或许让开辟者轻松创建相应式网页布局，适配各种屏幕尺寸和装备。栅格体系通过将页面分别为12列的布局布局，开辟者可以根据内容的紧张性和计划需求机动控制元素的宽度和分列。
在这篇文章中，我们将深入分析Bootstrap的栅格体系，包罗其工作原理、详细用法、相应式计划本领以及进阶本领。
栅格体系的根本原理

Bootstrap的栅格体系基于CSS的flexbox布局，而且接纳了12列的布局模子。也就是说，一个网页的容器可以被分成12等份，用户可以通过指定列的宽度来控制布局。
栅格体系的布局

栅格体系的根本构成部分包罗以下三个紧张元素：

• Container：用于包裹整个栅格体系的容器，可以分为固定宽度或流体布局（自顺应屏幕宽度）。
  
• Row：栅格行，用于包罗列元素，并确保列在水平分列时精确对齐。
  
• Col：栅格列，负责实际内容的表现，每一行最多可以包罗12列。
  

根本布局示例

以下是一个最底子的栅格布局，它包罗一个容器（container），一行（row），以及三列（col）：

1. <div class="container">
2.   <div class="row">
3.     <div class="col">列 1</div>
4.     <div class="col">列 2</div>
5.     <div class="col">列 3</div>
6.   </div>
7. </div>

复制代码

• Container：确保内容与页面边沿有符合的间距。
  
• Row：创建一行栅格，并确保列元素在一行内对齐。
  
• Col：每个col类代表一个列，占据划一宽度（主动分配）。
  

在上述例子中，三列在一行内均分12列的空间，因此每列宽度为4列。
容器（Container）的范例

Bootstrap提供了三种范例的容器，用于控制页面内容的宽度和布局：
固定宽度容器

固定宽度容器有固定的最大宽度，通常用于桌面屏幕。这种容器会在屏幕宽度富足大时保持肯定的页面边距。

1. <div class="container">
2.   <!-- 内容 -->
3. </div>

复制代码

流体容器

流体容器（container-fluid）始终占满整个屏幕的宽度，岂论装备的屏幕巨细怎样，实用于须要全屏宽度的布局。

1. <div class="container-fluid">
2.   <!-- 内容 -->
3. </div>

复制代码

相应式容器

相应式容器（container-{breakpoint}）根据差别屏幕的断点调解容器宽度。比方container-sm在小屏幕时布满屏幕，而在大屏幕时有固定宽度。

1. <div class="container-md">
2.   <!-- 内容 -->
3. </div>

复制代码

行与列（Row & Col）

栅格体系的关键在于怎样构造行和列。每一个row容器中的列必须被放置在一个.row中，以确保它们在同一水平线分列。
行（Row）

row是用来包裹列的，它确保列在水平方向精确分列，并处置惩罚列的间距题目。以下是一个带有两列的底子布局：

1. <div class="container">
2.   <div class="row">
3.     <div class="col">列 1</div>
4.     <div class="col">列 2</div>
5.   </div>
6. </div>

复制代码

列（Col）

col界说了栅格体系中的列布局。每行最多可以容纳12列，超出的列会主动换行。

1. <div class="row">
2.   <div class="col-4">列 1</div>
3.   <div class="col-4">列 2</div>
4.   <div class="col-4">列 3</div>
5. </div>

复制代码

• 在上述例子中，每个列使用col-4，即占用4个栅格单位。由于一行统共有12个栅格单位，3个col-4刚好填满整个行。
  

相应式断点（Responsive Breakpoints）

相应式计划是今世网页计划的核心，Bootstrap通过一系列断点来控制差别装备下的布局表现方式。
Bootstrap的断点

Bootstrap内置了多个相应式断点，用于控制在差别屏幕尺寸下的布局。这些断点根据屏幕的宽度分为：

• xs（超小屏幕）：<576px
  
• sm（小屏幕）：≥576px
  
• md（中屏幕）：≥768px
  
• lg（大屏幕）：≥992px
  
• xl（超大屏幕）：≥1200px
  
• xxl（超超大屏幕）：≥1400px
  

相应式列

可以根据差别的断点，为每个屏幕尺寸设置差别的列宽。比方，在桌面上三列表现为并排的，而在手机上它们会堆叠在一起：

1. <div class="row">
2.   <div class="col-sm-6 col-md-4">列 1</div>
3.   <div class="col-sm-6 col-md-4">列 2</div>
4.   <div class="col-sm-12 col-md-4">列 3</div>
5. </div>

复制代码

• col-sm-6：在小屏幕时每行表现2列。
  
• col-md-4：在中等屏幕时每行表现3列。
  
• col-sm-12：在小屏幕时第3列占据整行。
  

如许，你可以根据装备巨细动态调解页面布局，包管用户在手机、平板和桌面装备上都有精良的体验。
栅格体系中的对齐与排序

Bootstrap栅格体系允许你对罗列行对齐和排序，机动控制元素的展示方式。
垂直对齐

你可以使用align-items-*类对齐一行内全部列的内容：

1. <div class="row align-items-center">
2.   <div class="col">上对齐</div>
3.   <div class="col">垂直居中</div>
4. </div>

复制代码

常见对齐选项：

• align-items-start：顶部对齐
  
• align-items-center：垂直居中
  
• align-items-end：底部对齐
  

水平对齐

可以通过justify-content-*类控制列在水平方向的对齐方式：

1. <div class="row justify-content-center">
2.   <div class="col-4">居中对齐的列</div>
3. </div>

复制代码

常见的水平对齐选项：

• justify-content-start：左对齐
  
• justify-content-center：居中对齐
  
• justify-content-end：右对齐
  
• justify-content-between：两头对齐
  

列排序

偶尔你大概须要在HTML中按照特定序次编写列，但盼望在差别屏幕尺寸下重新分列它们。可以通过order-*类实现这一功能：

1. <div class="row">
2.   <div class="col order-3">第三列</div>
3.   <div class="col order-1">第一列</div>
4.   <div class="col order-2">第二列</div>
5. </div>

复制代码

在此例中，只管HTML中第三个div位于第一位，但在屏幕上它将表现为第三列。
栅格体系中的嵌套

你可以将栅格体系嵌套使用，以实现更复杂的布局布局。嵌套栅格是指在一个col列内部再创建一个row，然后在该行中使用多个col列。
嵌套栅格示例

1. <div class="container">
2.   <div class="row">
3.     <div class="col-8">
4.       主列
5.       <div class="row">
6.         <div class="col">嵌套列 1</div>
7.         <div class="col">嵌套列 2</div>
8.       </div>
9.     </div>
10.     <div class="col-4">侧边栏</div>
11.   </div>
12. </div>

复制代码

在
这个例子中，col-8内的行和列体现一个嵌套栅格布局，用于在主列内部再创建两列。
栅格体系的高级用法

等高列

在某些计划中，你盼望多列具有雷同的高度。由于Bootstrap栅格体系基于flexbox，你可以轻松实现等高布局：

1. <div class="row align-items-stretch">
2.   <div class="col">等高列 1</div>
3.   <div class="col">等高列 2</div>
4. </div>

复制代码

列偏移

使用offset-*类，你可以让列向右移动指定的列数，从而控制内容的布局。比方，假如你想让列从中心开始：

1. <div class="row">
2.   <div class="col-md-4 offset-md-4">偏移后的列</div>
3. </div>

复制代码

在这个例子中，offset-md-4让列向右偏移4个栅格单位，从而使列居中表现。
栅格体系的常见题目

• 为什么12列？
  12列的计划是由于12可以被多个数字整除（1、2、3、4、6），这使得它在布局上更具机动性。
  
• 列是否必须总和为12？
  不，列的总和不肯定必须为12。假如总和高出12，剩余的列将换行。假如不敷12，剩余的空间会保持空缺。
  

结语

Bootstrap的栅格体系不但功能强大，而且简朴易用。通过12列布局模子、相应式断点以及对齐与排序的机动设置，你可以轻松创建顺应各种屏幕尺寸的相应式网页布局。
继承实践并探索栅格体系的更多大概性，它将为你的网页开辟提供结实的底子。