Bootstrap折叠、卡片组件。手风琴效果

最新推荐文章于 2025-05-24 08:50:36 发布

C-kathryn

最新推荐文章于 2025-05-24 08:50:36 发布

阅读量917

点赞数 1

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap 组件折叠组件卡片组件手风琴效果

本文链接：https://blog.youkuaiyun.com/qq_41003773/article/details/99877636

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用折叠和卡片组件创建手风琴效果，包括组件的结构、属性及其实现方法。通过实例展示了如何利用data-toggle和data-target属性控制折叠行为，以及如何在多个折叠部分实现仅开启一个的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

折叠组件

    <h3>折叠</h3>
    <!--<a class="btn btn-info" data-toggle="collapse" href="#d1">折叠按钮</a>-->
    <button data-toggle="collapse" data-target="#d1">折叠按钮</button>
    <div id="d1" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </div>

data-toggle指以什么事件触发
data-target指事件的目标
collapse ------ 折叠
在这里插入图片描述

卡片组件

一个区域，内部内容都是垂直排列，都可以使用卡片

组成结构：
div.card
>div.card-header            > 代表直接子元素
+div.card-body              + 代表兄弟元素
+div.card-footer
a.card-link

	<h3>卡片</h3>
    <div class="card">
        <div class="card-header">
            <h4>卡片的标题</h4>
            <a href="" class="card-link">aaaaaa</a>
        </div>
        <div class="card-body">
            <p>卡片的内容</p>
        </div>
        <div class="card-footer">
            <p>版权</p>
        </div>
    </div>

在这里插入图片描述

手风琴效果

**注意事项：

类collapse不能和.card-body在同一元素下
几个折叠的部分，可以同时打开，而不能开启一个的时候，其他自动隐藏
解决方案：在3个card的外部，添加div#parent，在所有的div.collapse上添加事件，
data-parent="#parent"，这样就保证了，在div#parent中只有一个打开状态**

组成结构：

div#parent
>div.card
>div.card-header
	>a.card-link
+div.callapse
	>div.card-body

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <!--注意顺序-->
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h3>手风琴效果</h3>
    <div id="parent">
        <div class="card">
            <div class="card-header">
                <a href="#d1" data-toggle="collapse" class="card-link">8月22号</a>
            </div>
            <div id="d1" class="collapse" data-parent="#parent">
                <div class="card-body">
                    郑爽生日
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a href="#d2" data-toggle="collapse" class="card-link">8月24号</a>
                </div>
                <div id="d2" class="collapse" data-parent="#parent">
                    <div class="card-body">
                        林彦俊生日
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a href="#d3" data-toggle="collapse" class="card-link">10月3号</a>
                </div>
                <div id="d3" class="collapse" data-parent="#parent">
                    <div class="card-body">
                        陈立农生日
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述