让复杂的效果简单化
工具/原料
Hbuilder或Dreamweaver编辑器
方法/步骤
1、bootstrap框架是基于HTMLCSSJQuery的开源框架，构建适合PC和移动端设备两方面的Web页面需求。bootstrap框架是前端框架中非常优秀的框架之一，主要是易学、易操作。在bootstrap环境中，只要熟悉bootstrtap提供的各种效果的样式类，在我们需要的时候，直接调用就可以了。简单的说，在框架环境中做网站的过程，就是根据需要不断调用框架库中类的过程，当然，也可以自定义各种标签元素。本案例制作的手风琴如果用传统的方法做，代码比较复杂，而用bootstap环境制作就比较简单、快速。本案例的主要知识点是面板（panel）组件、面板组（panel-group）组件、折叠（collapse）组件。案例效果如下：
2、本案例的制作过程如下：首先搭建bootstrap环境，访问官网，下载环境文件夹，复制到你自己的站点文件夹中就可以了，具体可以参照官网说明。
3、接着新建html5结构的网页文件，加载必须的评鲦易纪文件，包括bootstrap样式文件bootstrap.css，jquery库文件jquery-3.婷钠痢灵2.1.min.js，bootstrap的js文件bootstrap.min.js。网页文件的代码如下：<linkrel="stylesheet"type="text/css"href="css/bootstrap.css"/><scripttype="text/javascript"src="js/jquery-3.2.1.min.js"></script><scripttype="text/javascript"src="js/bootstrap.min.js"></script>还有响应式布局的代码：<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
4、然后输入面板组件、折叠的结构代码，案例结构分两个部分，外层是面板组（panel-group）组件，内层是3个相同的面板（panel）组件，其中利用折叠（collapse）组件实现折叠效果。说明：大家制作案例的时候应该先输入结构的div，然后根据需要加入修饰的bootstrap类，这样更有利于学习。整体网页文件的代码如下：
5、<divclass="panelpanel-primary争犸禀淫"><divclass="panel-heading"稆糨孝汶;><h4class="panel-title"><ahref="#n2"data-toggle="collapse"data-parent="#mn">3d材质</a></h4></div><divclass="panel-collapsecollapse"id="n2"><divclass="panel-body">3D（3-Dimenshional，中空立体）材质，是一种透气性强、弹性，支撑性都很出色的新型纯织物材料。目前在床垫、枕头、坐垫目前在床垫、枕头、坐垫需要具有良好弹性、透气性行业里广泛使用需要具有良好弹性、透气性行业里广泛使用。</div></div></div><divclass="panelpanel-primary"><divclass="panel-heading"><h4class="panel-title"><ahref="#n3"data-toggle="collapse"data-parent="#mn">3d渲染</a></h4></div><divclass="panel-collapsecollapse"id="n3"><divclass="panel-body">3D渲染，渲染是CG的最后一道工序(当然，除了后期制作)也是最终使你图象符合你的3d场景的阶段。渲染有多种软件,如:各CG软件自带渲染引擎,还有诸如RenderMan、VRay等.</div></div></div></div></body></html>至此，案例制作完成