bootstrap中的Accordion组件如何使用

bootstrap作为一个前端组件库, 可以方便大家做页面开发, 这篇文章来解释下Accordion组件如何使用.

Accordion组件功能介绍

Accordion的中文是手风琴, 它的作用是在比较狭小的空间里可以写上比较多的文字.

下面是一个示例:

在初始状态下, 所有文字是收缩的.

但是当我点击某个标题时, 就会展开.

当我点击下一个标题时, 前面展开的会收缩, 然后展开当前点击标题的内容.

由此我们可以知道, Accordion组件的作用就是在狭小的空间内展示比较多的文字内容.

Accordion组件的使用

首先aria-<label>标签是给无障碍人士使用的, 我们去除掉, 以防加重了我们学习的难度. 其次我们只使用一个子项目来解析, 这样更容易理解, 整个代码就如下面这样:

其中我画出红线的六个点非常重要, 弄懂这六个点就明白了怎么使用.

标记一: 这是我们自定义整个Accordion的ID, 用来配合data-bs-parent使用(标记六), 他们两个联合起来的作用就是, 当有多个子项目的时候, 其中一个展开, 其他的全部会收缩起来.

标记二: data-bs-toggle="collapse" 意思是让该按钮具备控制某个元素展开和收缩的功能.

标记三: data-bs-target="<子项自定义ID>"这个属性用来配合标记二和标记五使用, 它用来告诉btn按钮控制哪个元素进行收缩和展开.

标记四: show是用来控制是否刚加载时就展开内容.

标记五: 配合标记三使用.

标记六: 配合标记一使用.

总结

1. 标记二, 标记三, 标记五三个必须一起使用, 也必须使用.

2. 标记一, 标记六两个必须一起使用, 不是必须使用, 但是推荐使用, 因为我们使用该组件的目的就是要在狭小的空间内展示最多的文字.

3. 标记四, 这个无所谓, 看个人需求.

文章首发于: https://hedaoshe.com/318.html