我可以将Bootstrap的Accordion或Alert样式应用于HTML< details>和吗< summary>?

0md85ypi  于 2023-05-04  发布在  Bootstrap
关注(0)|答案(1)|浏览(116)

我的项目使用Bootstrap,大部分时间没有任何Javascript,因为我只需要样式。现在我有一个项目,需要像他们的Accordion,需要Javascript的工作。但是有一个标准的<details> HTML tag可以做到这一点。问题是我不能真正应用 accordion 样式。
这是我迄今为止最好的尝试,但accordion-header也只是简单地 Package 了所有的主体:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="accordion">
    <details class="accordion-item">
        <summary class="">
            <div class="accordion-header">
                Title
            </div>
        </summary>

        <div class="accordion-body">
            <p>This is the body</p>
        </div>
    </details>
</div>

另一种方法是以某种方式使summary看起来像.alert

w6lpcovy

w6lpcovy1#

我不太清楚您所说的头部包裹主体是什么意思,但是将accordion-button类放在title元素上可以让您接近它。但图标不会翻转。这需要JavaScript或自定义CSS解决方案。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="accordion m-4">
  <details class="accordion-item">
    <summary class="accordion-button">
      <div class="accordion-header">
        Title
      </div>
    </summary>

    <div class="accordion-body">
      <p>This is the body</p>
    </div>
  </details>
</div>

相关问题