Bootstrap - 手风琴：初学者指南

你好，未来的网页开发者们！今天，我们将深入Bootstrap手风琴的精彩世界。作为你友好的计算机老师邻居，我很兴奋能引导你完成这次旅行。如果你之前从未写过一行代码，也不要担心 - 我们将从零开始，逐步构建！

Bootstrap - Accordion

Bootstrap手风琴是什么？

在我们深入了解之前，让我们先谈谈网页设计中手风琴是什么。想象一下音乐中的手风琴 - 它可以展开和收缩，展示不同的部分。Bootstrap手风琴在网页上的作用正是如此！它是一种巧妙的方式来组织内容，允许用户根据需要显示和隐藏部分。

它是如何工作的

Bootstrap手风琴是使用HTML、CSS和JavaScript（别担心，Bootstrap为我们处理了大部分JavaScript！）构建的。它由一系列可折叠的元素组成，可以通过点击它们的标题来展开或折叠。

以下是对关键组件的分解：

外部容器（通常是具有accordion类的<div>）
单个手风琴项（每个都包含在具有accordion-item类的<div>中）
每个项的标题（通常是具有accordion-header类的<h2>元素）
头标内的按钮，用于触发展开/折叠
当点击时显示/隐藏的内容面板（在具有accordion-collapse类的<div>元素中）

现在，让我们看看它是如何工作的！

基本示例

这里是一个简单的Bootstrap手风琴示例：

<div class="accordion" id="basicAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
手风琴项目 #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#basicAccordion">
<div class="accordion-body">
这是第一个手风琴项目的内容。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
手风琴项目 #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#basicAccordion">
<div class="accordion-body">
这是第二个手风琴项目的内容。
</div>
</div>
</div>
</div>

让我们分解一下：

我们从一个具有accordion类的<div>开始，这是我们的主容器。
在里面，我们有accordion-item类的<div>，用于每个可折叠的部分。
每个项目都有一个带有accordion-header类的标题，包含控制折叠/展开的按钮。
内容在单独的<div>中，具有accordion-collapse和collapse类。
按钮上的data-bs-toggle="collapse"和data-bs-target="#collapseOne"属性将其与内容<div>链接起来。

小贴士：注意第一个项目的class="accordion-collapse collapse show"和aria-expanded="true"吗？这意味着它在页面加载时默认是打开的。

简洁手风琴

想要一个没有边框的更简洁的外观？Bootstrap为你提供了简洁手风琴：

<div class="accordion accordion-flush" id="flushAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
简洁手风琴项目 #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#flushAccordion">
<div class="accordion-body">这是简洁手风琴的第一个项目。</div>
</div>
</div>
<!-- 如有需要，添加更多项目 -->
</div>

这里的关键区别是向主容器添加了accordion-flush类。这移除了默认的背景颜色和一些边框，呈现出更干净的外观。

总是打开的手风琴

默认情况下，当打开一个新的手风琴项目时，Bootstrap手风琴会关闭其他项目。但如果你希望多个项目保持打开状态，该怎么办呢？以下是如何操作：

<div class="accordion" id="alwaysOpenAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingAlwaysOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAlwaysOne" aria-expanded="true" aria-controls="collapseAlwaysOne">
总是打开的项目 #1
</button>
</h2>
<div id="collapseAlwaysOne" class="accordion-collapse collapse show" aria-labelledby="headingAlwaysOne">
<div class="accordion-body">这个项目可以在其他项目打开时保持打开状态。</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingAlwaysTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAlwaysTwo" aria-expanded="false" aria-controls="collapseAlwaysTwo">
总是打开的项目 #2
</button>
</h2>
<div id="collapseAlwaysTwo" class="accordion-collapse collapse" aria-labelledby="headingAlwaysTwo">
<div class="accordion-body">这个也可以独立地保持打开状态。</div>
</div>
</div>
</div>

这里的秘密是什么？我们从内容<div>中移除了data-bs-parent属性。这告诉Bootstrap在打开一个项目时不自动关闭其他项目。

无障碍性

无障碍性在网页开发中至关重要。Bootstrap手风琴带有内置的无障碍特性，但正确使用它们很重要：

使用正确的标题级别（<h2>、<h3>等）作为手风琴标题。
在按钮上包含aria-expanded属性（打开时设置为"true"，关闭时设置为"false"）。
在按钮上使用aria-controls来链接它们的内容<div>。
在内容<div>上添加aria-labelledby，引用它们相应的标题。

以下是一个总结关键无障碍属性的表格：

属性	位置	目的
aria-expanded	按钮	表示是否展开该部分
aria-controls	按钮	将按钮链接到其内容
aria-labelledby	内容 `<div>`	将内容链接到其标题

记住，这些不仅仅是装饰 - 屏幕阅读器和其他辅助技术依赖这些属性来正确地导航你的手风琴。

结论

就这样，伙计们！你已经开始了Bootstrap手风琴世界的旅程。从基本结构到无障碍性考虑，你现在有了创建网页上组织有序、交互式内容的工具。

记住，熟能生巧。尝试创建你自己的手风琴，混合和匹配样式，最重要的是，享受其中的乐趣！谁知道呢，你可能会在网页开发中找到一种新的节奏。（抱歉，我忍不住开了一个手风琴的玩笑！）

快乐编码，下次见，继续扩展你的知识 - 就像手风琴一样！

Credits: Image by storyset