如何自定义引导手风琴

使用CSS自定义手风琴标题和车身样式，以修改背景，颜色，边界和版式。 2。通过集成引导图标并通过CSS内容进行切换，将默认箭头替换为Plus/Minus（例如Plus/Minus）。 3。通过删除默认样式并应用盒子阴影，borderradius和边距来调整间距和边界，以进行类似卡的设计。 4。可选地使用过渡属性自定义折叠动画速度或使用JavaScript将其禁用。 5。通过将数据与父母分组的项目使用，确保一次只打开一个面板。 6。允许多个面板通过删除或修改HTML或JavaScript中的数据-BS-父母属性来保持打开状态。定制是通过CSS覆盖和次要的HTML或JavaScript调整来实现的，从而实现了完全品牌且用户友好的手风琴组件。

当您想将其与网站的设计匹配或提高可用性时，自定义引导手风琴是一项常见的任务。无论您是使用Bootstrap 4还是5，都可以通过CSS替代和可选的JavaScript调整来对默认手风琴进行样式和修改。这是有效做到的方法。

1。更改手风琴头和身体样式

默认手风琴使用微妙的样式。为了使其脱颖而出，首先要自定义标头（按钮）和车身（折叠内容）。

 / *自定义手风琴按钮 */
.ACCORDION-BUTTON {
  背景色：＃f8f9fa;
  颜色：＃212529;
  字体大小：1REM;
  边界：1px固体＃dee2e6;
  边界拉迪乌斯：8px;
  边缘底：8px;
}

/ *删除默认的焦点轮廓或样式IT */
.ACCORDION-BUTTON：FOCUS {
  盒子阴影：无；
  边界彩色：＃007BFF;
}

/ *风格活动（打开）状态 */
.ACCORDION-BUTTON：不（.Collapsed）
  背景色：＃e9ecef;
  颜色：＃0056B3;
  盒子阴影：无；
}

/ *自定义手风琴机构 */
.Accordion-Body {
  背景色：#ffffff;
  边界顶：1PX固体＃dee2e6;
  填充：1REM；
  字体大小：0.95REM；
  颜色：＃495057;
}

注意：Bootstrap的JavaScript自动切换.not(.collapsed)类，以指示打开面板。

2。删除默认箭头并添加自定义图标

Bootstrap使用在开/关闭时旋转的背景人字形。您可以使用字体Awesome或Bootstrap图标将其替换为自定义图标（例如，加上/减）。

使用引导图标的示例：

 <link href =“ https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.11.11.11.11.11.11.11.11.11.11.11.11.11.11.11.11.11.11.11.11.11.1.1.css.css” rel =“ stylesheet”>

更新您的手风琴按钮：

 <button class =“ councation button collapsed” type =“ button” data-bs-toggle =“ collapse” data-bs-target =“＃collapseone”>
  第1节 
  <i class =“ bi-plus-circle ms-auto”> </i>
</button>

然后使用CSS根据状态交换图标：

 。
  内容：“ \ f18c”; / *缩小图标 */
}

。
  内容：“ \ f18e”; / *加上圆图标 */
}

另外，您可以隐藏默认图标并使用两个单独的图标管理可见性。

3。调整间距和边界

通过调整填充，边缘和边界来控制整体外观。

 .ACCORDION-ITEM {
  边界：无；
  边界拉迪乌斯：12px;
  溢出：隐藏；
  盒子阴影：0 2PX 10PX RGBA（0,0,0,0.1）;
  边缘底：10px;
}

.ACCORDION-HEADER {
  边界底：无；
}

这使得更现代，纸牌般的外观。

4。自定义崩溃动画（可选）

Bootstrap使用CSS过渡来崩溃。您可以调整速度：

 .ACCORDION-COLLAPSE {
  过渡：高度0.3s易于;
}

或通过删除collapse类并通过JavaScript处理它，完全禁用动画。

5。使其总是打开一个面板（默认行为）

这已经是Bootstrap中的默认值，但是请确保您使用data-bs-parent来链接面板：

 <div class =“ ACCORAION” ID =“ myaccordion”>
  <div class =“ Accordion-item”>
    <h2 class =“ Accialion-Header”>
      <button class =“ councation button collapsed” data-bs-toggle =“ collapse” data-bs-target =“＃倒塌” aria-controls =“ collapseone” data-bs-parent =“＃myaccordion”>
        第1节
      </button>
    </h2>
    在
      <div class =“ ACCORAION-BODY”>内容1 </div>
    </div>
  </div>
  <！ - 更多项目 - >
</div>

data-bs-parent可确保一次仅打开一个面板。

6。可选：允许多个面板打开

在JavaScript中删除data-bs-parent或将其设置为其他容器或null ：

 //允许多个开放面板
document.queryselectorall（'。ancouchion-button'）。foreach（button => {
  button.addeventlistener（'click'，（）=> {
    //不要执行父母分组
  }）;
}）;

或者简单地省略HTML的data-bs-parent 。

自定义引导程序手风琴不需要覆盖JavaScript，即智能CSS和次要的HTML调整。专注于.accordion-button ， .accordion-body和PARRES。ACCORDION .accordion-item类，您可以实现完全品牌的外观。基本上，只需覆盖您不喜欢的样式，并增强与图标或动画的互动。

以上是如何自定义引导手风琴的详细内容。更多信息请关注PHP中文网其他相关文章！