网站前端技术干货之bootstrap环境制作手风琴效果

bootstrap框架是基于HTML5、CSS3、JQuery 的开源框架，构建适合 PC 和移动端设备两方面的 Web 页面需求。bootstrap框架是前端框架中非常优秀的框架之一，主要是易学、易操作。

在bootstrap环境中，只要熟悉bootstrtap提供的各种效果的样式类，在我们需要的时候，直接调用就可以了。简单的说，在框架环境中做网站的过程，就是根据需要不断调用框架库中类的过程，当然，也可以自定义各种标签元素。

本案例制作的手风琴如果用传统的方法做，代码比较复杂，而用bootstap环境制作就比较简单、快速。本案例的主要知识点是面板（panel）组件、面板组（panel-group）组件、折叠（collapse）组件。

案例效果如下：

本案例的制作过程如下：

首先搭建bootstrap环境，访问官网https://v3.bootcss.com/getting-started/#download，下载环境文件夹，复制到你自己的站点文件夹中就可以了，具体可以参照官网说明。效果如下图：

接着新建html5结构的网页文件，加载必须的文件，包括bootstrap样式文件bootstrap.css，jquery库文件jquery-3.2.1.min.js，bootstrap的js文件bootstrap.min.js。网页文件的代码如下：

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

还有响应式布局的代码：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

然后输入面板组件、折叠的结构代码，案例结构分两个部分，外层是面板组（panel-group）组件，内层是3个相同的面板（panel）组件，其中利用折叠（collapse）组件实现折叠效果。

说明：大家制作案例的时候应该先输入结构的div，然后根据需要加入修饰的bootstrap类，这样更有利于学习。

整体网页文件的代码如下：

<div class="panel panel-primary">

<div class="panel-heading">

<h4 class="panel-title">

<a href="#n2" data-toggle="collapse" data-parent="#mn">3d材质</a>

</h4>

</div>

<div class="panel-collapse collapse" id="n2">

<div class="panel-body">

3D（3-Dimenshional，中空立体）材质，是一种透气性强、弹性，支撑性都很出色的新型纯织物材料。目前在床垫、枕头、坐垫目前在床垫、枕头、坐垫需要具有良好弹性、透气性行业里广泛使用需要具有良好弹性、透气性行业里广泛使用。

</div>

</div>

</div>

<div class="panel panel-primary">

<div class="panel-heading">

<h4 class="panel-title">

<a href="#n3" data-toggle="collapse" data-parent="#mn">3d渲染</a>

</h4>

</div>

<div class="panel-collapse collapse" id="n3">

<div class="panel-body">

3D渲染，渲染是CG的最后一道工序(当然，除了后期制作)也是最终使你图象符合你的3d场景的阶段。渲染有多种软件,如:各CG软件自带渲染引擎,还有诸如RenderMan、VRay等.

</div>

</div>

</div>

</div>

</body>

</html>

至此，案例制作完成。