先看效果:

Code:

     <div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>

BootStrap2学习日记22---点击展开的更多相关文章

  1. BootStrap2学习日记3--响应式布局实用类

    BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅 ...

  2. BootStrap2学习日记2--将固定布局换成响应式布局

    概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...

  3. BootStrap2学习日记23---图片轮播

    <div id="carousel1" class="carousel slide"> <div class="carousel-i ...

  4. BootStrap2学习日记21---消息提示

    <p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...

  5. BootStrap2学习日记20---定制缩略图

    先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...

  6. BootStrap2学习日记19---缩略图

    缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...

  7. BootStrap2学习日记18---提示消息

    代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...

  8. BootStrap2学习日记17---导航路径和分页

    导航路径 代码: <ul class="breadcrumb"> <li><a href="#">Home</a> ...

  9. BootStrap2学习日记16---选项卡内容

    代码: <ul class="nav nav-tabs"> <li class="active"><a href="#t ...

随机推荐

  1. iconfont阿里妈妈前端小图标使用方法详解

    图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3. ...

  2. Spark RDD概念学习系列之RDD的checkpoint(九)

     RDD的检查点 首先,要清楚.为什么spark要引入检查点机制?引入RDD的检查点?  答:如果缓存丢失了,则需要重新计算.如果计算特别复杂或者计算耗时特别多,那么缓存丢失对于整个Job的影响是不容 ...

  3. 【131】如何讲好PPT

    1 列提纲2 写稿子3 背稿子4 演练5遍,用自己的话说出来,最好和稿子一样,但不强求一样,关键要理解5 不一定要做,但是做好了会有很大提高,讲的时候也会很NB:有时间可以再演练几遍,录出来看看哪里需 ...

  4. java反射工具类

    package com.yingchao.kgou.core; import java.lang.reflect.Field; import java.lang.reflect.InvocationT ...

  5. HDU 4599 Dice (概率DP+数学+快速幂)

    题意:给定三个表达式,问你求出最小的m1,m2,满足G(m1) >= F(n), G(m2) >= G(n). 析:这个题是一个概率DP,但是并没有那么简单,运算过程很麻烦. 先分析F(n ...

  6. How Tomcat Works(十五)

    本文接下来分析Context容器,Context容器实例表示一个具体的Web应用程序,其中包括一个或多个Wrapper实例:不过Context容器还需要其他的组件支持,典型的如载入器和Session管 ...

  7. [网络]远程访问局域网svn服务器[转]

    转至:http://8474832.blog.51cto.com/8464832/1555449 打开路由器访问界面 选择转发规则->端口映射-新建 在弹出的界面中填写相应的端口号了内网ip 填 ...

  8. IL学习资料

    读懂IL代码就这么简单 由浅入深CIL系列 .net IL 指令速查

  9. eclipse设置默认编码格式为UTF-8

    需要设置的几处地方为: Window->Preferences->General ->Content Type->Text->JSP 最下面设置为UTF-8 Window ...

  10. 习总强调网络安全 ,咱们国产SSL证书必须加快普及速度

    上海(2014 年 2 月 27 日)—— 央视新闻联播 27 日报道中央网络安全和信息化领导小组于当日成立的消息及习总在该小组首次会议上的重要讲话.据悉,该小组由习总任小组长,李克强.刘云山任副组长 ...