Bootstrap - 栈：初学者指南

你好，未来的网页开发者们！今天，我们将一起探索Bootstrap栈的奇妙世界。如果你之前从未写过一行代码，也不用担心——我将作为你在这个激动人心的旅程中的友好向导。在本教程结束时，你将能够像专业人士一样堆叠元素！

Bootstrap - Stacks

Bootstrap栈是什么？

在我们开始之前，让我们先了解一下Bootstrap中的栈是什么。想象你正在用乐高积木搭建一座塔。你可以将它们垂直堆叠（一个叠在另一个上面）或者水平堆叠（并排）。Bootstrap栈的工作方式与此类似，但我们是网页上的HTML元素进行排列。

现在，让我们探索Bootstrap中的两种主要栈类型：

垂直栈

垂直栈就像一叠煎饼——每个元素都坐在下面元素的上面。在Bootstrap中，我们使用.vstack类来创建垂直栈。

基本垂直栈

让我们从一个简单的例子开始：

<div class="vstack gap-3">
<div class="p-2">第一项</div>
<div class="p-2">第二项</div>
<div class="p-2">第三项</div>
</div>

在这段代码中：

我们创建了一个带有vstack类的容器<div>。
gap-3在我们的堆叠项之间添加了一些空间。
每个项都是一个带有p-2类的<div>，用于内边距。

当你运行这段代码时，你会看到三个盒子垂直堆叠，每个盒子包含文本。就这么简单！

带有不同内容的垂直栈

让我们稍微增加一些趣味：

<div class="vstack gap-3">
<button class="btn btn-secondary">点击我！</button>
<div class="bg-light border">我是一个盒子</div>
<div class="bg-light border">
<h3>我是一个标题</h3>
<p>而我是文本</p>
</div>
</div>

在这里，我们混合了不同类型的内容：

一个按钮（使用Bootstrap的按钮类）
一个带有浅色背景和边框的简单div
一个更复杂的div，包含标题和段落

这显示了垂直栈的多样性。你不仅限于简单的文本框！

水平栈

现在，让我们换个方向，谈谈水平栈。如果垂直栈就像煎饼，那么水平栈就像一排骨牌——元素并排排列。我们使用.hstack类来实现这个。

基本水平栈

这里有一个简单的例子：

<div class="hstack gap-3">
<div class="p-2">第一</div>
<div class="p-2">第二</div>
<div class="p-2">第三</div>
</div>

这段代码与我们的垂直栈非常相似，但我们使用hstack而不是vstack。结果呢？三个盒子水平排列！

带对齐的水平栈

让我们让事情更有趣一些：

<div class="hstack gap-3">
<div class="bg-light border">第一项</div>
<div class="bg-light border ms-auto">第二项</div>
<div class="bg-light border">第三项</div>
</div>

在这个例子中：

我们给项目添加了背景和边框。
第二项上的ms-auto类将其推向右侧，在第一项和第二项之间创建空间。

这展示了我们如何在水平栈中控制位置。

结合垂直和水平栈

现在，魔法就要发生了。我们可以结合垂直和水平栈来创建复杂的布局：

<div class="vstack gap-3">
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="在这里添加你的项目...">
<button type="button" class="btn btn-secondary">提交</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">重置</button>
</div>
<div class="bg-light border">自定义项目</div>
<div class="bg-light border">自定义项目</div>
</div>

这个复杂的例子显示：

一个垂直栈作为主容器
垂直栈内的一个水平栈（输入框和按钮）
垂直栈下方的更多项目

结果是类似表单的结构，下面有额外的元素——这是网页设计中常见的模式！

栈方法表

这里有一个方便的表格，总结了我们已经讨论的关键类和方法：

类/方法	描述	示例
`.vstack`	创建一个垂直栈	`<div class="vstack">`
`.hstack`	创建一个水平栈	`<div class="hstack">`
`gap-{大小}`	在栈项之间添加空间	`<div class="vstack gap-3">`
`ms-auto`	在hstack中将一个项推向右侧	`<div class="ms-auto">`
`.vr`	在hstack中创建一个垂直分隔符	`<div class="vr"></div>`

结论

就这样，朋友们！我们一起穿越了Bootstrap栈的土地，从简单的垂直排列到复杂的水平和垂直栈的组合。记住，网页设计就像搭乐高——从这些简单的块开始，很快你就能创造出惊人的结构！

用这些例子进行练习，尝试不同的组合，不要害怕犯错误。这是我们所有人作为开发者学习和成长的方式。在你意识到之前，你将能够像经验丰富的专业人士一样堆叠元素！

快乐编码，愿你的栈总是完美对齐！?

Credits: Image by storyset