Bootstrap - 网格系统：初学者的友好指南

你好，未来的网页开发者们！今天，我们将踏上一段激动人心的旅程，探索Bootstrap的网格系统世界。如果你之前从未编写过一行代码，也不用担心——我会一直陪伴在你身边，一步一步地解释所有内容。所以，拿起一杯咖啡（或者如果你喜欢，也可以是茶），让我们一起开始吧！

Bootstrap网格系统是什么？

在我们开始之前，让我给你讲一个小故事。想象你正在尝试整理你的书架。你想要整齐地排列你的书，但它们大小不一。这很令人沮丧，对吧？Bootstrap网格系统就像一个神奇的书架，可以自动组织你的内容，无论它的大小或形状如何！

在网页设计术语中，网格系统是一个强大的布局工具，可以帮助你创建响应式和结构良好的网页。这就像有一个私人助手，可以完美地安排你的网页内容，无论它是显示在大型桌面显示器上还是小巧的手机屏幕上。

基本示例

让我们从一个简单的例子开始，以熟悉Bootstrap网格系统的基础结构：

<div class="container">
<div class="row">
<div class="col-sm">
三列中的一列
</div>
<div class="col-sm">
三列中的一列
</div>
<div class="col-sm">
三列中的一列
</div>
</div>
</div>

这里发生了什么？让我们分解一下：

1. 我们从一个container类开始。这就像是一个外部的盒子，用来容纳所有内容。
2. 在容器内部，我们有一个row类。你可以将其视为我们书架比喻中的架子。
3. 在行内部，我们有三个col-sm类。这些就像是我们书架上的书，并排放在架子上。

它是如何工作的

Bootstrap网格系统基于12列的布局。为什么是12？在网页设计中，这是一个神奇的数字，因为它可以被1、2、3、4和6整除，给了我们很多灵活性！

以下是一个视觉表示：

1	2	3	4	5	6	7	8	9	10	11	12
列	列	列	列	列	列	列	列	列	列	列	列

这些列可以组合在一起，创建更宽的内容区域。例如，你可以有一个两列各6个单位的布局，或者三列各4个单位的布局。这就像是在玩积木！

自动布局列

现在，让我们来看看一些酷炫的技巧。Bootstrap可以自动为你处理列宽度。看看这个：

<div class="container">
<div class="row">
<div class="col">
2列中的1列
</div>
<div class="col">
2列中的2列
</div>
</div>
<div class="row">
<div class="col">
3列中的1列
</div>
<div class="col">
3列中的2列
</div>
<div class="col">
3列中的3列
</div>
</div>
</div>

在这个例子中，我们没有指定列宽度。Bootstrap足够智能，可以平等地分配空间到各个列。这就像有一个机器人帮你整理书架！

等宽

想要所有列都具有相同的宽度，无论内容如何？简单！

<div class="container">
<div class="row">
<div class="col">
3列中的1列
</div>
<div class="col">
3列中的2列（更宽）
</div>
<div class="col">
3列中的3列
</div>
</div>
</div>

尽管中间的列有更多的内容，但所有三列都将保持相同的宽度。这就像是有可扩展的书，总是完美地适合你的书架！

设置一列宽度

有时，你希望一列具有特定的宽度，而让其他列自动调整。以下是如何操作：

<div class="container">
<div class="row">
<div class="col">
3列中的1列
</div>
<div class="col-6">
3列中的2列（更宽）
</div>
<div class="col">
3列中的3列
</div>
</div>
</div>

在这种情况下，中间的列将占据6个单位（宽度的一半），而其他两列将平分剩余的空间。

可变宽度内容

如果你希望一列根据其内容调整宽度，Bootstrap也为你提供了支持：

<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
3列中的1列
</div>
<div class="col-md-auto">
可变宽度内容
</div>
<div class="col col-lg-2">
3列中的3列
</div>
</div>
</div>

col-md-auto类允许该列根据其内容增长或缩小。这就像有一本书可以根据其邻居的大小改变自己的大小！

响应式类

现在，让我们来谈谈如何使我们的布局响应式。Bootstrap使用断点来根据屏幕大小调整布局。以下是主要的断点：

断点	类前缀	尺寸
超小	无	<576px
小	sm	≥576px
中	md	≥768px
大	lg	≥992px
超大	xl	≥1200px
超超大	xxl	≥1400px

所有断点

以下是如何使用这些断点：

<div class="container">
<div class="row">
<div class="col">列</div>
<div class="col">列</div>
<div class="col">列</div>
<div class="col">列</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>

这个布局将在所有屏幕尺寸下保持不变。这就像有一个书架，无论你从房间对面看还是近距离看，它看起来都是一样的！

堆叠到水平

但如果我们要根据屏幕大小改变布局呢？看看这个：

<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>

在小屏幕和更大屏幕上，这些列将并排显示。在超小屏幕上，它们将垂直堆叠。这就像有一个书架，当空间紧张时，可以变成一个书塔！

混合搭配

你还可以为不同的屏幕尺寸混合和匹配列大小：

<div class="container">
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>

这个布局在小屏幕和中等屏幕及以上的屏幕上看起来会有所不同。这就像有一个变形书架！

行列

想要快速创建等宽列？使用行列：

<div class="container">
<div class="row row-cols-2">
<div class="col">列</div>
<div class="col">列</div>
<div class="col">列</div>
<div class="col">列</div>
</div>
</div>

这将创建一个有两列的行，无论你有多少col divs。这就像有一个书架，总是将你的书以一对的方式排列！

嵌套

最后但同样重要的是，你可以在网格内嵌套网格：

<div class="container">
<div class="row">
<div class="col-sm-3">
第一级：.col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
第二级：.col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
第二级：.col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>

这会创建一个网格内的网格。这就像在更大的书架里有小书架！

就这样，伙计们！你已经迈出了进入Bootstrap网格系统的第一步。记住，熟能生巧。尝试着玩转这些例子，混合搭配不同的类，看看会发生什么。在你知道之前，你将能够像专业人士一样创建出美丽、响应式的布局！

快乐编码，愿你的网页总是井井有条！

Credits: Image by storyset