先看效果:

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. 第二百三十一天 how can I 坚持

    哎,蛋疼的一天,一点破问题搞了一下午,还没搞利索. 他们要组织出去玩,我没有参加啊,随便找了个借口. 博客园的字体怎么变小了呢,看着好难受啊,昨天传照片传的? 睡觉.外边下着雨呢,喜欢下雨的夏天还有下 ...

  2. OperateParticleWithCodes

    [OperateParticleWithCodes] Listing 6-6 shows how you might configure an emitter’s scale property. Th ...

  3. 个人用户安装SEP注意事项

    一.安装时选择“非管控客户端” 二.安装时选择“自定义安装” 三.不要安装“应用程序与设备控制”,否则会拖慢开机   离线病毒库下载地址 http://www.symantec.com/securit ...

  4. 移动端页面的head头部内容

  5. HDU 2196 Computer (树dp)

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2196 给你n个点,n-1条边,然后给你每条边的权值.输出每个点能对应其他点的最远距离是多少 ...

  6. 异常:exception和error的区别

    Throwable 是所有 Java 程序中错误处理的父类 ,有两种子类: Error 和 Exception .     Error :表示由 JVM 所侦测到的无法预期的错误,由于这是属于 JVM ...

  7. non-manifold Mesh(非流形网格)

    三角网格曲面中,大多的算法基于流形网格manifold mesh,其定义如下: 1)Each edge is incident to only one or two faces: 一条网格边为一个或两 ...

  8. Jackson 高性能的JSON处理 ObjectMapper

    http://blog.csdn.net/wangyang2698341/article/details/8223929 今天自行研究了下json ,感觉非常好用,经过测试比google的GSON快多 ...

  9. Remobjects SDK 服务器搭建

    for delphi: 在工程文件源码中,有一个编译字 {#ROGEN: ***.rodl},将它的名字改成 指定的 rodl 即可自动生成相关文件,一般默认为 NewService.

  10. Windows编写bat执行文件

    1:建立TXT文件 Rem nping用来测试IP地址的连通性 Rem nping --tcp -p 80 --flags rst --ttl 2 192.168.1.1 date 2:重命名为bat ...