Bootstrap5 折叠

听海边涛声

于 2024-09-02 14:02:59 发布

阅读量97

点赞数 2

文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/panghuangang/article/details/141817547

版权

https://getbootstrap.com/docs/5.3/components/collapse/

要隐藏和显示大量内容时，可折叠组件非常有用。
bootstrap折叠插件基本上需要两个元素才能正常工作：触发元素，如按钮或超链接；以及可折叠元素本身。

点击按钮折叠/显示切换

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">折叠按钮</button>
    <div class="collapse" id="demo">
      <p>要显示/隐藏的内容</p>
    </div>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

开始显示：
在这里插入图片描述

点击按钮，折叠的内容显示出来：
在这里插入图片描述

再点击按钮，内容被折叠了起来：
在这里插入图片描述

点击超链接折叠/显示

对于<a>元素，可以使用href属性代替data-bs-target属性。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <a data-bs-toggle="collapse" href="#demo">超链接</a>
    <div class="collapse" id="demo">
      <p>要显示/隐藏的内容</p>
    </div>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

点击：
在这里插入图片描述

再点击：
在这里插入图片描述

默认显示可折叠的内容

默认情况下，可折叠内容是隐藏的。但可以添加.show类来默认显示内容。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <a data-bs-toggle="collapse" href="#demo">超链接</a>
    <div class="collapse show" id="demo">
      <p>要显示/隐藏的内容</p>
    </div>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>