Bootstrap折叠实战

Bootstrap折叠实战

---

1.将上一节写到的demo02.html内容复制到新建的demo05.html，打开demo05.html，将“栏目管理2”和“栏目管理3”内容的代码删除掉，保留“栏目管理1”中的代码。

2.折叠实例

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

<ul class="list-group">

     <li class="list-group-item">

     <span class="glyphicon  glyphicon-envelope"></span>&nbsp;<a href="#">增加栏目</a></li>

      //每一个列表项上是"list-group-item"。

     //我们还可以在上面添加图标，这个地方最好留个空格将图标和文字空开。

       <li  class="list-group-item"><a href="#">增加栏目</a></li>

        <li  class="list-group-item"><a href="#">增加栏目</a></li>

</ul>

</div>

3.运行效果

4.上面是一组，可以复制这个功能代码实现多组。我们还可以添加一个“页脚”。

(注意：这里我们最好不要声明panel-body，这样会产生一个间距。）

5.运行效果