BootStrap笔记-折叠的使用

x33g5p2x  于2022-02-07 转载在 Bootstrap  
字(3.6k)|赞(0)|评价(0)|浏览(170)

运行截图如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CN_TEST1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--    bootstrap css核心文件-->
    <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery,需要提前引用-->
    <script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单-->
    <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件-->
    <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>

    <div class="container-fluid">

        <button data-toggle="collapse" data-target="#demo">折叠</button>
        <div id="demo" class="collapse">
            Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
            Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
        </div>

        <br/>

        <a href="#demo2" data-toggle="collapse">Collapsible</a>
        <div id="demo2" class="collapse">
            Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
            Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
        </div>

        <br/>

<!--        风琴实例-->
        <div id="accordion">
            <div class="card">
                <div class="card-header">
                    <a class="card-link" data-toggle="collapse" href="#collapseOne">
                        选项一
                    </a>
                </div>
                <div id="collapseOne" class="collapse show" data-parent="#accordion">
                    <div class="card-body">
                        Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
                        Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="card-link" data-toggle="collapse" href="#collapseTwo">
                        选项二
                    </a>
                </div>
                <div id="collapseTwo" class="collapse show" data-parent="#accordion">
                    <div class="card-body">
                        Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
                        Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="card-link" data-toggle="collapse" href="#collapseThree">
                        选项三
                    </a>
                </div>
                <div id="collapseThree" class="collapse show" data-parent="#accordion">
                    <div class="card-body">
                        Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
                        Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello
                    </div>
                </div>
            </div>
        </div>

    </div>

</body>
</html>

解释:

①在div中使用collapse类指定折叠元素。点击按钮会显示和隐藏的话,需要在a或button上添加data-toggle="collapse"属性,data-target="#id"属性是对应折叠内容;

②<a>元素上可以使用href属性来代替data-target;

③data-parent属性来确保所有的折叠元素在指定的父元素下,这样就能实现在一个折叠选项显示其他选项就隐藏。

相关文章

微信公众号

最新文章

更多