bootstrap4-Collapse 折叠酷炫特效

最新推荐文章于 2023-04-12 11:10:54 发布

LBJคิดถึง 小迷弟

最新推荐文章于 2023-04-12 11:10:54 发布

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： bootstrap jQuery

本文链接：https://blog.csdn.net/weixin_44540481/article/details/86507721

本文介绍了如何利用Bootstrap4的Collapse功能创建折叠效果。首先，需要引入bootstrap.min.css和jquery-3.2.1.min.js, bootstrap.min.js。Collapse类用于定义折叠元素，通过data-toggle="collapse"和data-target="#id"属性控制内容的隐藏与显示。在<a>或<button>元素上设置这些属性，点击即可切换显示状态。文章还展示了运用Bootstrap搭建的折叠框架的效果，并邀请读者私信了解更多。" 107248055,9032582,爬井的蜗牛：算法模拟,"['算法', '数学问题', '编程挑战', 'c++']

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

一· 引用文件：CSS: bootstrap.min

js: 1. jquery-3.2.1.min

2. bootstrap.min

简介：1.Collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。

2.控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。

3.data-target="#id" 属性是对应折叠的内容 (<div id="demo">)
注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性。

二· 运用Bootstarp搭建框架

目标完成效果图：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>bootstrap4-Collapse 折叠</title>
    <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h3 class="h3">Collapse</h3>
        <p>
            <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
                Link 和 href
            </a>
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
                Button 和 data-target
            </button>
        </p>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                <h3>人之有好也，学而顺之；人之有恶也，避而讳之，故阴道而阳取之也。</h3>如果对方有某种嗜好，就要仿效以迎合他的兴趣；如果对方厌恶什么，就要加以避讳以免引起反感。所以要进行隐密谋划而公开的进行获取。
            </div>
        </div>
        <h3 class="h3 mt-2">多个目标</h3>
        <p>
            <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1">切换第一个元素</a>
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2">切换第二个元素</button>
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">切换两个元素</button>
        </p>
        <div class="row">
            <div class="col">
                <div class="collapse multi-collapse" id="multiCollapseExample1">
                    <div class="card card-body">
                        <h3>故知之始己，自知而后知人也。</h3>所以要想掌握情况，要先从自己开始，只有了解自己，然后才能了解别人。
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="collapse multi-collapse" id="multiCollapseExample2">
                    <div class="card card-body">
                        <h3>貌者不美，又不恶，故至情托焉。</h3>无论遇到什么事情，既不喜形于色，也不怒目相待的人，是让人感觉深沉的人，是一个值得信赖的人，是可以托之以机密大事的。
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('.collapse').collapse();
    </script>
</body>
</html>