Bootstrap - 悬浮标签：初学者的全面指南
你好，有抱负的网页开发者们！今天，我们将深入Bootstrap的悬浮标签世界。作为你友好邻里的计算机老师，我很兴奋能引导你完成这次旅行。如果你是编程新手，不用担心——我们会一步一步来，在你意识到之前，你将能像专业人士一样使用悬浮标签！
什么是悬浮标签？
在我们开始之前，让我们了解一下悬浮标签是什么。想象你正在填写一个表单，当你开始输入时，每个输入字段的标签神奇地悬浮在字段上方。这就是悬浮标签的精髓！它们提供了一个干净、直观的用户界面，节省空间，看起来也非常酷。
基本示例
让我们从一个基本示例开始，熟悉一下：
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">邮箱地址</label>
</div>这里发生了什么？让我们分解一下：
- 我们将输入和标签包裹在一个带有
form-floating类的div中。 -
input在label之前（这个顺序很重要！） - 我们为输入添加了一个
placeholder，Bootstrap将使用它来确定标签的大小。
当你聚焦于输入或开始输入时，标签会优雅地悬浮到输入字段上方。这就像魔法一样，但实际上只是聪明的CSS！
文本域
悬浮标签不仅仅适用于简单的输入。它们也非常适合文本域：
<div class="form-floating">
<textarea class="form-control" placeholder="在这里留下评论" id="floatingTextarea"></textarea>
<label for="floatingTextarea">评论</label>
</div>这就像我们的基本示例，但是用textarea代替了input。当你需要用户输入更长的文本时，这非常完美！
下拉菜单
下拉菜单怎么办？Bootstrap为你准备好了：
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="悬浮标签选择示例">
<option selected>打开这个选择菜单</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<label for="floatingSelect">适用于选择</label>
</div>选择一个选项时，悬浮标签会出现。这是保持表单在不同输入类型间外观一致的好方法。
禁用
有时，你可能需要禁用一个输入。以下是如何在保持悬浮标签的同时禁用输入的方法：
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">邮箱地址（已禁用）</label>
</div>只需为输入添加disabled属性，Bootstrap会相应地设置样式。
只读纯文本
如果你想显示一些不可更改的信息怎么办？这就引入了只读纯文本：
<div class="form-floating mb-3">
<input type="email" class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]" readonly>
<label for="floatingEmptyPlaintextInput">空输入</label>
</div>这创建了一个不可编辑的字段，但仍能享受到悬浮标签的样式。
输入组
悬浮标签还可以与输入组一起使用，用于更复杂的表单布局：
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="用户名">
<label for="floatingInputGroup1">金额</label>
</div>
</div>这个示例将输入组（美元符号前缀）与悬浮标签输入结合在一起。
布局
最后，让我们看看如何将这些悬浮标签输入排列在响应式网格中：
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]">
<label for="floatingInputGrid">邮箱地址</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>打开这个选择菜单</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<label for="floatingSelectGrid">适用于选择</label>
</div>
</div>
</div>这创建了一个两列布局，在小屏幕上会垂直堆叠。
一切就绪
现在我们已经涵盖了悬浮标签的所有这些不同方面，让我们创建一个小表单，将所有内容结合起来：
<form class="container mt-5">
<h2>联系我们</h2>
<div class="row g-3">
<div class="col-md-6">
<div class="form-floating">
<input type="text" class="form-control" id="floatingName" placeholder="John Doe">
<label for="floatingName">全名</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
<label for="floatingEmail">邮箱地址</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<select class="form-select" id="floatingSelect">
<option selected>选择一个主题</option>
<option value="1">一般咨询</option>
<option value="2">技术支持</option>
<option value="3">反馈</option>
</select>
<label for="floatingSelect">主题</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="在这里留下评论" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">评论</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">提交</button>
</div>
</div>
</form>这个表单结合了我们讨论过的所有元素：输入、选择和文本域，所有这些都带有悬浮标签，并排列在响应式网格布局中。
结论
就这样，朋友们！我们已经涵盖了Bootstrap的悬浮标签的方方面面。从基本输入到复杂布局，你现在有了创建时尚、用户友好的表单的工具，让你的用户印象深刻，让你的网站脱颖而出。
记住，熟能生巧。尝试实验这些示例，混合搭配不同的元素，看看你能创造出什么。在你意识到之前，你将像经验丰富的网页开发者一样使用悬浮标签！
快乐编码，愿你的标签总是悬浮得优雅！
Credits: Image by storyset