Bootstrap - 手風琴：初學者指南

Hello there, future web developers! Today, we're diving into the wonderful world of Bootstrap Accordions. As your friendly neighborhood computer teacher, I'm excited to guide you through this journey. Don't worry if you've never written a line of code before - we'll start from scratch and build our way up!

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