利用bootstrap 4 完成折叠效果

开发工具与关键技术：Adobe Dreamweaver CC 2017 折叠
作者：孙水兵
撰写时间：2019年2月10

在平时，我们可能需要将一部分内容隐藏，再通过按钮在下方显示出来。这时，我们就可以通过bootstrap 4 中的Collapse来完成。
一、关于collapse

1. collapse 类用于指定一个折叠元素 (实例中的 div标签); 点击按钮后会在隐藏与显示之间切换。
2. 控制内容的隐藏与显示，需要在a>标签或 button标签 元素上添加 data-toggle=“collapse” 属性。 data-target="#id" 属性是对应折叠的内容 (
3. 注意:a标签元素上你可以使用 href 属性来代替 data-target 属性
   通过类更改显示和隐藏另一个class包含的元素：
   .collapse 隐藏内容
   .collapsing 带动态效果的切换
   .collapse.show 显示内容
   二、前期准备
   引入bootstrap 4 CSS文件（bootstrap.min.css）、JS文件（bootstrap.min.js）以及jQuery文件

三、实例
在下方单个显示
HTML
用button写按钮，在button标签中用a标签写折叠，在a标签中加data-toggle="collapse"属性，在href中 写与内容对应类名（要加上类选择器）。再用div标签包裹隐藏的内容，在div中加class属性，class中加collapse以及href中相同的类名。然后再写要包裹的内容。

背景颜色

   

    

   	
1. bg-primary(重要的背景颜色)
   	
2. bg-success(执行成功背景颜色)
    
   

多个目标
切换第一个元素按钮用a标签写，在a标签中加class属性，在class中加上btn的类与collapse，再加上data-toggle="collapse"属性，在href中 写与内容对应id（要加上id选择器）。切换第二个元素按钮与切换这两个元素按钮用button标签写，与a标签同样的加class属性，在class中加上btn的类与collapse，再加上data-toggle="collapse"属性，在切换第二个元素按钮中的data-target中 写与内容对应id（要加上id选择器）。在切换这两个元素按钮中的data-target中 写一个类名（要加上类选择器）。用网格布局写其隐藏的内容，在所有col下的标签中的class中加上在上方写切换这两个元素按钮中的data-target的类名。（如要刚开始时的内容为隐藏，将show去掉）。

   
   切换第一个元素
   
   
   切换第二个元素
   
   
   切换这两个元素
   
   

   	

   		

   			
 第一个元素 
   		
   	
 
   	

   		

   			
第二个元素
   		
   	
   

手风琴的例子
用bootstrap 4 中的卡片的样式来写，不过将header与body分开，其他的与多个目标类似。

   

   	

   		可折叠组项目＃1
   	
   	

   		
内容1
   	
   
   

   	

   		可折叠组项目＃2
   	
   	

   		
内容2
   	
   
   

   	

   		可折叠组项目＃3
   	
   	

   		
内容3