Bootstrap 折叠（Collapse）插件

最新推荐文章于 2020-03-31 10:27:17 发布

boonyaxnn

最新推荐文章于 2020-03-31 10:27:17 发布

阅读量2.4k

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap Collapse

本文链接：https://blog.csdn.net/boonyaxnn/article/details/64451905

版权

Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1、使用折叠（Collapse）插件可以创建可折叠的分组或面板accordion：

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap 折叠（Collapse）插件</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel-group" id="accordion">
	  <div class="panel panel-default">
	    <div class="panel-heading">
	      <h4 class="panel-title">
	        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">点我展开，再点我折叠。Bootstrap组件 </a>
	      </h4>
	    </div>
	    <div id="collapseOne" class="panel-collapse collapse in" style="background:red;">
	      <div class="panel-body">
	        Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：
                              下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等 。
	       </div>
	    </div>
	  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 点我展开,再点我折叠。Bootstrap-Javascript插件 </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" style="background: orange;">
      <div class="panel-body">
        Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：
                   模式对话框、标签页、滚动条、弹出框、<span>折叠</span>、警告、轮播、提示工具、按钮等。 
       </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">点我展开，再点我折叠。Bootstrap Less </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" style="background: purple;">
      <div class="panel-body">
        Less 是一个 CSS 预处理器，让 CSS 具有动态性。另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。
                    这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins（混合）和 nesting（嵌套）。
      </div>
    </div>
  </div>
</div>
</div>
	</body>
</html>

效果图

注意：

data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
href 或 data-target 属性添加到父组件，它的值是子组件的 id。
data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。

2、创建不带面板accordion标记的简单的可折叠组件：

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap 折叠（Collapse）插件</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel-group" id="accordion">
	  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单的可折叠组件.Bootstrap-Javascript插件 </button>
	 <div id="demo" class="collapse in">
            Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：
                   模式对话框、标签页、滚动条、弹出框、<span>折叠</span>、警告、轮播、提示工具、按钮等。 
     </div>
</div>
</div>
	</body>
</html>

效果图

3、下表列出了折叠（Collapse）插件中要用到的事件。这些事件可在函数中当钩子使用。

boonyaxnn

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 折叠（Collapse）插件

1、使用折叠（Collapse）插件可以创建可折叠的分组或面板accordion： Bootstrap 折叠（Collapse）插件点我展开，再点我折叠。Bootstrap组件 Bootstrap中包含了丰富的Web组件，根据这些组件
复制链接

扫一扫

专栏目录