Bootstrap - 定位大小：初学者的全面指南

你好，未来的网页开发者们！今天，我们将深入Bootstrap大小定位的精彩世界。作为你友好的邻里电脑老师，我将引导你一步一步地完成这个旅程。如果你是编程新手，不用担心——我们将从基础知识开始，逐步学习。那么，拿起一杯咖啡（或者如果你喜欢，茶也可以），让我们开始吧！

什么是Bootstrap大小定位？

在我们深入了解之前，先来了解一下Bootstrap大小定位是什么。想象你正在装饰一个房间。你希望一些家具完美地适配空间，一些占据一半的空间，还有一些根据房间大小进行调整。Bootstrap大小定位正是帮助我们以同样的方式调整网页上的元素！

相对于父元素

让我们从相对于父元素定位大小开始。这就像决定一幅画在墙上应该占据多少空间。

宽度类

Bootstrap提供了允许你将元素的宽度设置为父元素宽度百分比的类。以下是一些类的便捷表格：

类名	描述
w-25	宽度 25%
w-50	宽度 50%
w-75	宽度 75%
w-100	宽度 100%
w-auto	自动宽度

让我们看看这些类的实际应用：

<div class="container">
<div class="w-25 p-3" style="background-color: #eee;">宽度 25%</div>
<div class="w-50 p-3" style="background-color: #ddd;">宽度 50%</div>
<div class="w-75 p-3" style="background-color: #ccc;">宽度 75%</div>
<div class="w-100 p-3" style="background-color: #bbb;">宽度 100%</div>
<div class="w-auto p-3" style="background-color: #aaa;">自动宽度</div>
</div>

在这个例子中，我们创建了五个div元素，每个元素都有一个不同的宽度类。p-3类添加了一些内边距以增加可见性。你会看到每个div占据了其父容器宽度的不同百分比。

高度类

类似地，Bootstrap也提供了设置高度的类：

类名	描述
h-25	高度 25%
h-50	高度 50%
h-75	高度 75%
h-100	高度 100%
h-auto	自动高度

以下是如何使用这些类的示例：

<div style="height: 200px;">
<div class="h-25 d-inline-block" style="width: 120px; background-color: #eee;">高度 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: #ddd;">高度 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: #ccc;">高度 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: #bbb;">高度 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: #aaa;">自动高度</div>
</div>

在这个例子中，我们在父div上设置了一个固定高度，然后在子元素上使用高度类。d-inline-block类使这些div元素显示为行内块。

相对于视口宽度

现在，让我们来谈谈相对于视口宽度定位元素大小。这就像调整电视屏幕以适应不同房间大小。

Bootstrap使用vw单位，代表“视口宽度”。以下是一些类：

类名	描述
vw-100	宽度 100vw
min-vw-100	最小宽度 100vw
max-vw-100	最大宽度 100vw

让我们看一个示例：

<div class="vw-100" style="background-color: #eee;">这个div的宽度与视口相同。</div>

这个div将始终与视口一样宽，即使你调整浏览器窗口大小也是如此。

相对于视口高度

类似于视口宽度，我们也可以使用vh单位相对于视口高度定位元素。

类名	描述
vh-100	高度 100vh
min-vh-100	最小高度 100vh
max-vh-100	最大高度 100vh

以下是如何使用这些类的示例：

<div class="vh-100" style="background-color: #eee;">这个div的高度与视口相同。</div>

这个div将始终与视口一样高，随着浏览器窗口的调整而调整。

相对于视口

最后，让我们来看看相对于视口的宽度和高度定位大小。

最小宽度 100%

<div class="min-vw-100" style="background-color: #eee;">100vw</div>

这个div至少与视口一样宽，但如果内容需要更多空间，它也可以扩展。

最小高度 100%

<div class="min-vh-100" style="background-color: #eee;">100vh</div>

类似地，这个div至少与视口一样高，但如果需要，也可以扩展。

所有内容整合在一起

现在我们已经涵盖了所有这些大小选项，让我们创建一个有趣的小示例，将它们应用到实践中：

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
我相对于父元素宽度是75%！
</div>
<div class="h-50 p-3" style="background-color: #ced4da;">
我相对于父元素高度是50%！
</div>
</div>
<div class="col-md-6">
<div class="vw-100 p-3 mb-2" style="background-color: #adb5bd;">
我和视口一样宽！
</div>
<div class="vh-50 p-3" style="background-color: #6c757d; color: white;">
我高度是视口的一半！
</div>
</div>
</div>
</div>

在这个示例中，我们使用了宽度、高度和相对于视口的大小定位来创建一个多样化和响应式的布局。尝试调整你的浏览器窗口大小，看看这些元素如何适应！

就这样，伙计们！你已经迈出了进入Bootstrap大小定位世界的第一步。记住，熟能生巧，所以不要害怕在你自己的项目中尝试这些类。在你意识到之前，你将能够像专业人士一样创建响应式布局！

快乐编码，愿你的网站总是恰到好处！?

Credits: Image by storyset