手风琴boostrap代码
时间: 2023-11-12 10:09:39 浏览: 44
以下是一个简单的手风琴 Bootstrap 代码示例:
```html
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
手风琴标题 1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
手风琴内容 1
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
手风琴标题 2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
手风琴内容 2
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
手风琴标题 3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
手风琴内容 3
</div>
</div>
</div>
</div>
```
在这个代码示例中,我们使用了 Bootstrap 的 `accordion` 和 `card` 组件来创建手风琴。每个手风琴面板都是一个 `card`,包含标题和内容。通过使用 `data-toggle="collapse"` 和 `data-target` 属性,我们可以告诉 Bootstrap 点击标题时将哪个面板折叠起来。`aria-expanded` 和 `aria-controls` 属性用于辅助技术,以指示手风琴面板的状态。